admin管理员组

文章数量:1399847

I have a html page with a select element like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<select id="ExSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
 </select>
  <br>
  <br>
<script src=".1.0.js"></script>
  <button onclick="ToTheNext()" id="btnext">Next</button>
</body>
</html>

And I'm using this simple function on the button OnClick to change the selected item to the next option item of the dropdown:

function ToTheNext()
{
    $('#ExSelect option:selected').next().attr('selected', 'selected');
}

My question is: How can i change the selected item to the previous option of this tag using Vanilla JavaScript or jQuery?

Jsbin Example: ,js,output

I have a html page with a select element like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<select id="ExSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
 </select>
  <br>
  <br>
<script src="https://code.jquery./jquery-3.1.0.js"></script>
  <button onclick="ToTheNext()" id="btnext">Next</button>
</body>
</html>

And I'm using this simple function on the button OnClick to change the selected item to the next option item of the dropdown:

function ToTheNext()
{
    $('#ExSelect option:selected').next().attr('selected', 'selected');
}

My question is: How can i change the selected item to the previous option of this tag using Vanilla JavaScript or jQuery?

Jsbin Example: https://jsbin./nuyeduf/edit?html,js,output

  • javascript
  • jquery
  • html
Share Improve this question edited Sep 29, 2017 at 13:25 Shiladitya 12.2k17 gold badges28 silver badges42 bronze badges asked Sep 29, 2017 at 12:50 Pv-VianaPv-Viana 6428 silver badges26 bronze badges 5
  • 5 just use prev() instead of next() – Toni Michel Caubet Commented Sep 29, 2017 at 12:54
  • 1 Like @ToniMichelCaubet said, just use prev() instead of next() – Nicholas Commented Sep 29, 2017 at 12:58
  • 2 and .prop('selected', true) instead of .attr('selected', 'selected'); – Pv-Viana Commented Sep 29, 2017 at 12:58
  • 1 I'm feeling very dumb right now....... – Pv-Viana Commented Sep 29, 2017 at 12:59
  • 1 @Pv-Viana We've been there :P – Toni Michel Caubet Commented Sep 29, 2017 at 13:00
Add a ment  | 

4 Answers 4

Reset to default 6

Two problems - first by using attr you're setting more than one option to selected, which is probably not what you want to do as it will stop the prev() from working as you expect.

Change your code like this:

function ToTheNext()
{
    $('#ExSelect option:selected').next().prop('selected', true);
}

function ToThePrevious()
{
    $('#ExSelect option:selected').prev().prop('selected', true);
}

https://jsbin./xewopobasi/1/edit?html,js,output

If you're using jQuery then stop using onclick attributes and instead assign click handlers appropriately

$('#btnext').on('click', function(){
    $('#ExSelect option:selected').next().prop('selected', true);
});


$(function(){

  $('#btnext').on('click',function(){
    $('#ExSelect option:selected').next().prop('selected', true);
  });

  $('#btprev').on('click',function(){
    $('#ExSelect option:selected').prev().prop('selected', true);
  });

});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ExSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
 </select>
  <br>
  <br>
  <button id="btnext">Next</button>
  <button id="btprev">Prev</button>

Replace the .attr('selected', 'selected'); with .prop('selected', true);

next() with prev()

and add the jQuery script under the button.

const select = $('#ExSelect');

function next()
{
   select.find('option:selected').next().prop('selected', true);
}

function prev()
{
  select.find('option:selected').prev().prop('selected', true);
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ExSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>
<button onclick="next()" id="btnext">Next</button>
<button onclick="prev()" id="btprev">Prev</button>

Use $('#ExSelect option:selected').prev().prop('selected', true);

In order to plete the answer. If you want to trigger something with the new selected option, you must add .change() at the end of your functions :

function ToTheNext(){
    $('#ExSelectoption:selected').next().prop('selected', true).change();
}

function ToThePrevious(){
    $('#ExSelectoption:selected').prev().prop('selected', true).change();
}

本文标签： javascriptHow select the previous option with jQueryStack Overflow

版权声明：本文标题：javascript - How select the previous option with jQuery? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744161353a2593351.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。