jQuery使用下一个select选项

我如何使用jQuery将已经select的项目的“下一个”项目设置为“已select”。

例如，如果我有：

<select> <option value="1" >Number 1</option> <option value="2" selected="selected">Number 2</option> <option value="3" >Number 3</option> <option value="4" >Number 4</option> </select> 

我们可以看到select了“Number 2”，并且使用jQuery，我想将“Number 3”设置为selected，并从“Number 2”中删除所选的“attribute”。 我假设我需要使用下一个select器，但我不太确定如何实现。

Answer 1

 $('option:selected', 'select').removeAttr('selected').next('option').attr('selected', 'selected'); 

检查工作代码在这里http://jsbin.com/ipewe/edit

Answer 2

更新：

至于jQuery 1.6+，在这种情况下，你应该使用prop()而不是attr() 。

属性和属性之间的差异在特定情况下可能很重要。 在jQuery 1.6之前，.attr（）方法在检索某些属性时有时会考虑属性值，这可能会导致不一致的行为。 从jQuery 1.6开始，.prop（）方法提供了显式检索属性值的方法，而.attr（）检索属性。

 var theValue = "whatever"; $("#selectID").val( theValue ).prop('selected',true); 

原始答案：

如果您想通过选项的值来select它的位置（这个例子假定你有一个用于select的ID）：

 var theValue = "whatever"; $("#selectID").val( theValue ).attr('selected',true); 

你不需要“取消select”。 当你select另一个时会自动发生。

Answer 3

从版本1.6.1开始，最好使用方法prop来表示布尔属性/属性，例如selected，readonly，enabled，…

 var theValue = "whatever"; $("#selectID").val( theValue ).prop('selected',true); 

欲了解更多信息，请参阅http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

Answer 4

您可以使用

 $('option:selected').next('option') 

要么

 $('option:selected + option') 

并设置值：

 var nextVal = $('option:selected + option').val(); $('select').val(nextVal); 

Answer 5

如果你想指定select的ID：

 $("#nextPageLink").click(function(){ $('#myselect option:selected').next('option').attr('selected', 'selected'); $("#myselect").change(); }); 

如果你点击ID为“nextPageLink”的项目，下一个选项将被选中，onChange（）事件将被调用。 它可能看起来像这样：

 $("#myselect").change(function(){ $('#myDivId').load(window.location.pathname,{myvalue:$("select#myselect").val()}); }); 

OnChange（）事件使用Ajax将东西加载到指定的div中。

window.location.pathname =实际地址

OnChange（）事件被定义，因为它允许你改变值不仅使用netx / prevbutton，而是直接使用标准select。 如果值改变，页面会自动执行一些操作。

Answer 6

这就是我刚刚使用，我喜欢它是多么干净:-)

 $('select').val(function(){ var nextOption = $(this).children(':selected').next(); return $(nextOption).val(); }).change(); 

Answer 7

 $('your_select option:selected').next('option').prop('selected', true) 

Answer 8

 $('#next').click( function(){ $('#colored_background option:selected').next('option').attr('selected', 'selected'); changeBackgroundColor(); }); 

在什么是我最喜欢的颜色？ 。 点击箭头。

Answer 9

find行，然后

 var row = $('#yourTable'); 

您要select的值

 var theValue = "5"; row.find("select:eq(2)").find("option[value="+theValue+']').attr('selected','selected'); 

Answer 10

  $("select").prop("selectedIndex",$("select").prop("selectedIndex")+1) 

Answer 11

 $('#my_sel').val($('#my_sel option:selected').next().val()); $('#my_sel').val($('#my_sel option:selected').prev().val());