使用jQuery选择下一个选项

zlwx9yxi  于 2023-06-22  发布在  jQuery
关注(0)|答案(8)|浏览(167)

我试图创建一个按钮,可以选择下一个选项。
所以,我有一个select(id=selectionChamp),它有几个选项,一个input next(id=fieldNext),我试着这样做:

$('#fieldNext').click(function() {
    $('#selectionChamp option:selected', 'select').removeAttr('selected')
          .next('option').attr('selected', 'selected');

    alert($('#selectionChamp option:selected').val());      
});

但我不能选择下一个选项。谢谢!

9rygscc1

9rygscc11#

$('#fieldNext').click(function() {
    $('#selectionChamp option:selected').next().attr('selected', 'selected');

    alert($('#selectionChamp').val());      
});

@VisioN更好的回答:https://stackoverflow.com/a/11556661/1533609

omtl5h9j

omtl5h9j2#

$("#fieldNext").click(function() {
    $("#selectionChamp > option:selected")
        .prop("selected", false)
        .next()
        .prop("selected", true);
});​

DEMO:http://jsfiddle.net/w9kcd/1/

bvjveswy

bvjveswy3#

没有jQuery也很简单。一旦到达最后一个选项,此选项将循环到第一个选项:

function nextOpt() {
  var sel = document.getElementById('selectionChamp');
  var i = sel.selectedIndex;
  sel.options[++i%sel.options.length].selected = true;
}

window.onload = function() {
  document.getElementById('fieldNext').onclick = nextOpt;
}

一些测试标记:

<button id="fieldNext">Select next</button>
<select id="selectionChamp">
 <option>0
 <option>1
 <option>2
</select>
7nbnzgx9

7nbnzgx94#

$(function(){
  $('#button').on('click', function(){
    var selected_element = $('#selectionChamp option:selected');
    selected_element.removeAttr('selected');
    selected_element.next().attr('selected', 'selected');

    $('#selectionChamp').val(selected_element.next().val());

  });
});

http://jsbin.com/ejunoz/2/edit

jhdbpxl9

jhdbpxl95#

我希望这样的按钮循环通过选项,也触发变化事件。以下是可能的解决方案:

$("#fieldNext").click(function() {
  if ($('#selectionChamp option:selected').next().length > 0) 
    $('#selectionChamp option:selected').next().attr('selected', 'selected').trigger('change');
  else $('#selectionChamp option').first().attr('selected', 'selected').trigger('change');
});

下面是jsFiddle:http://jsfiddle.net/acosonic/2cg9t17j/3/

ar5n3qh5

ar5n3qh56#

$('#fieldNext').click(function() {
$('#selectionChamp option:selected').removeAttr('selected')
      .next('option').attr('selected', 'selected');

alert($('#selectionChamp option:selected').val());      
});
rjjhvcjd

rjjhvcjd7#

试试这个:

$(document).ready(function(){
        $("#fieldNext").on("click",function(){
            $optionSelected = $("#selectionChamp > option:selected");
            $optionSelected.removeAttr("selected");
            $optionSelected.next("option").attr("selected","selected");       
        });
    });
weylhg0b

weylhg0b8#

如果除了option元素之外还有optiongroup元素,其他解决方案就不起作用了。在这种情况下,这似乎起作用:

var options = $("#selectionChamp option");
var i = options.index(options.filter(":selected"));
if (i >= 0 && i < options.length - 1) {
    options.eq(i+1).prop("selected", true);
}

(You可能认为i的表达式也可以写成options.index(":selected"),但这并不总是有效。我不知道为什么,一个解释将是受欢迎的。

相关问题