使用jQuery选择下一个选项。

Question

我正在尝试创建一个可以选择下一个选项的按钮。

所以，我有一个带有多个选项的选择器（id=selectionChamp），一个输入框next（id=fieldNext），我试图做到这一点：

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

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

但是我无法选择下一个选项。谢谢！

- Clément Andraud

---

你是否在页面加载时加载DOM？ - Riz

你是在 ready 函数中使用那段代码吗？ - Riz

使用最新版本的jQuery和on方法进行事件绑定。 - Riz

是的，在 ready 函数中。但没关系，我已经得到了答案 ^^ - Clément Andraud

Answer 1

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

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

更好的回答是@VisioN提供的：https://dev59.com/9Wgu5IYBdhLWcg3wHzoX#11556661

- bugwheels94

---

还需要取消当前选项，例如$('#selectionChamp option:selected').attr('selected', false);。 - anthonygore

@anthonygore是正确的。如果您不清除当前版本的Safari，则会产生空值，并且选择菜单将保持原始值。 - teewuane

这对我来说不起作用，没有 .trigger('change')。 - Ingus

@teewuane，我猜我会相信你的话，但这没有任何意义。一旦你取消选择，$('#selectionChamp option:selected')看起来会返回下拉列表中的第一项。似乎VisioN的答案更合理。 - sg_man

@sg_man 是的。他的回答更好。我在7年前回答了这个问题，所以它被接受了，但他的回答更好。毫无疑问。 - bugwheels94

Answer 2

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

示例: http://jsfiddle.net/w9kcd/1/

- VisioN

---

你的例子没有循环遍历元素...只停留在最后一个。 - Aleksandar Pavić

@AleksandarPavić 为什么应该这样做？ - VisioN

抱歉，你是正确的，在原始请求中不需要循环，然而这里是改进后的答案，它会循环并触发变化事件，以 jQuery 的方式，毕竟我们要为人们提供最好的答案。http://jsfiddle.net/acosonic/2cg9t17j/3/ - Aleksandar Pavić

Answer 3

没有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>

- RobG

---

长命RobG！ - php_nub_qq

Answer 4

$(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

- Riz

Answer 5

我希望这个按钮可以循环浏览选项，并且触发更改事件。下面是可能的解决方案：

$("#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/

- Aleksandar Pavić

Answer 6

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

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

- user1047100

Answer 7

试试这个：

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

- jbrtrnd

Answer 8

其他解决方案在存在选项组元素以及选项元素的情况下无法正常工作。在这种情况下，以下方法似乎可以解决问题：

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);
}

你可能认为表达式 i 也可以写成 options.index(":selected")，但这并不总是有效的。我不知道原因，欢迎解释。

- robinst