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器,但我不太确定如何实现。

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

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

更新:

至于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另一个时会自动发生。

从版本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/

您可以使用

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

要么

 $('option:selected + option') 

并设置值:

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

如果你想指定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。 如果值改变,页面会自动执行一些操作。

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

 $('select').val(function(){ var nextOption = $(this).children(':selected').next(); return $(nextOption).val(); }).change(); 
 $('your_select option:selected').next('option').prop('selected', true) 
 $('#next').click( function(){ $('#colored_background option:selected').next('option').attr('selected', 'selected'); changeBackgroundColor(); }); 

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

find行,然后

 var row = $('#yourTable'); 

您要select的值

 var theValue = "5"; row.find("select:eq(2)").find("option[value="+theValue+']').attr('selected','selected'); 
  $("select").prop("selectedIndex",$("select").prop("selectedIndex")+1) 
 $('#my_sel').val($('#my_sel option:selected').next().val()); $('#my_sel').val($('#my_sel option:selected').prev().val());