Question

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

例如，如果我有：

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

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

Answer 1

<强>更新

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

属性和属性之间的区别非常重要具体情况。在jQuery 1.6之前，有时会使用.attr（）方法在检索某些属性时考虑了属性值，这可能会导致行为不一致。从jQuery 1.6开始，.prop（）方法提供了一种显式检索属性值的方法 .attr（）检索属性。

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

原始答案：

如果您想通过选项的值选择，请选择其位置的REGARDLESS（此示例假设您有一个选择的ID）：

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

您无需“取消选择”。当您选择另一个时，这会自动发生。

Answer 2

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

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

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 / prev按钮更改值，而且直接使用标准选择。如果更改了值，页面会自动执行某些操作。

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

找到该行，然后

var row = $('#yourTable');

您要选择的值

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

Answer 9

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

在What is my favorite color?工作。点击箭头。

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

jQuery使用Next设置选定的选项

11 个答案: