使用 jQuery 选择下一个选项答案

【问题标题】：Select next option with jQuery使用 jQuery 选择下一个选项
【发布时间】：2012-07-18 09:14:09
【问题描述】：

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

所以，我有一个带有多个选项的选择 (id=selectionChamp)，下一个输入 (id=fieldNext)，我尝试这样做：

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

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

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

【问题讨论】：

你在页面加载时加载 DOM 吗？
表示你在准备函数中使用该代码吗？
使用最新版本的jquery和on方法进行事件绑定。
是的，处于就绪功能。但没关系，我有我的答案^^

标签： javascript jquery option next

【解决方案1】：

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

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

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

【讨论】：

还需要取消选择当前选项，例如$('#selectionChamp option:selected').attr('selected', false);
@anthonygore 是对的。如果您不为当前版本的 Safari 清除此项，它将产生一个空值，并且选择菜单将保持在原始值上。
如果没有.trigger('change')，这对我不起作用
@teewuane 我想我会相信你的话，但这没有任何意义。取消选择后，似乎 $('#selectionChamp option:selected') 将返回下拉列表中的第一项。似乎 VisioN 的回答更理智。
@sg_man 是的。他的回答更好。我在 7 年前提前 2 分钟回答了它，所以它被接受了，但他的回答更好。毫无疑问

【解决方案2】：

我希望这样的按钮能够循环通过选项，并触发更改事件。这是可能的解决方案：

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

【讨论】：

【解决方案3】：

如果除了选项元素之外还有选项组元素，其他解决方案将不起作用。在这种情况下，这似乎可行：

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")，但这并不总是有效。我不知道为什么，欢迎解释。）

【讨论】：

【解决方案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

【讨论】：

【解决方案5】：

没有 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 万岁！

【解决方案6】：

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

演示： http://jsfiddle.net/w9kcd/1/

【讨论】：

您的示例不会循环遍历元素...只是在最后一个停止。
@AleksandarPavić 为什么要这样做？
对不起，你是对的，它不需要在原始请求中循环，但是这里是改进的答案，它以 jQuery 方式循环和触发更改事件，毕竟它是关于为人们提供最佳答案jsfiddle.net/acosonic/2cg9t17j/3

【解决方案7】：

试试这个：

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

【讨论】：

【解决方案8】：

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

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

【讨论】：