Javascript 使用 jQuery 选择下一个选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11556557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select next option with jQuery
提问by Clément Andraud
I'm trying to create a button that can select next option.
我正在尝试创建一个可以选择下一个选项的按钮。
So, i have a select (id=selectionChamp) with several options, an input next (id=fieldNext), and i try to do that :
所以，我有一个带有多个选项的选择（id=selectionChamp），下一个输入（id=fieldNext），我尝试这样做：
$('#fieldNext').click(function() {
$('#selectionChamp option:selected', 'select').removeAttr('selected')
.next('option').attr('selected', 'selected');
alert($('#selectionChamp option:selected').val());
});
But I can not select the next option.. Thanks !
但我不能选择下一个选项..谢谢！
回答by bugwheels94
$('#fieldNext').click(function() {
$('#selectionChamp option:selected').next().attr('selected', 'selected');
alert($('#selectionChamp').val());
});
Better answer by @VisioN: https://stackoverflow.com/a/11556661/1533609
@VisioN 的更好回答：https://stackoverflow.com/a/11556661/1533609
回答by VisioN
$("#fieldNext").click(function() {
$("#selectionChamp > option:selected")
.prop("selected", false)
.next()
.prop("selected", true);
});?
回答by RobG
Pretty simple without jQuery too. This one will loop around to the first option once the last is reached:
没有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;
}
Some test markup:
一些测试标记：
<button id="fieldNext">Select next</button>
<select id="selectionChamp">
<option>0
<option>1
<option>2
</select>
回答by Riz
$(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());
});
});
回答by Aleksandar Pavi?
I would expect such button to loop thru options, and also to trigger change event. Here is possible solution for that:
我希望这样的按钮通过选项循环，并触发更改事件。这是可能的解决方案：
$("#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');
});
Here is jsFiddle: http://jsfiddle.net/acosonic/2cg9t17j/3/
这是 jsFiddle：http: //jsfiddle.net/acosonic/2cg9t17j/3/
回答by robinst
The other solutions don't work in case there are optiongroup elements in addition to option elements. In that case, this seems to work:
如果除了 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 may think that the expression for icould also be written as options.index(":selected"), but that doesn't always work. I don't know why, an explanation would be welcome.)
（您可能认为 for 的表达式i也可以写为options.index(":selected")，但这并不总是有效。我不知道为什么，欢迎解释。）
回答by jbrtrnd
Try this :
尝试这个 ：
$(document).ready(function(){
$("#fieldNext").on("click",function(){
$optionSelected = $("#selectionChamp > option:selected");
$optionSelected.removeAttr("selected");
$optionSelected.next("option").attr("selected","selected");
});
});
回答by jbrtrnd
$('#fieldNext').click(function() {
$('#selectionChamp option:selected').removeAttr('selected')
.next('option').attr('selected', 'selected');
alert($('#selectionChamp option:selected').val());
});
