web-dev-qa-db-ja.com

jQueryは次を使用して選択オプションを設定します

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」を選択済みに設定し、選択した「attribute」を「Number 2」から削除します。 nextセレクターを使用する必要があると仮定していますが、実装方法がよくわかりません。

jqueryhtml-select
42
Dodinas
$('option:selected', 'select').removeAttr('selected').next('option').attr('selected', 'selected');

ここで作業コードを確認してください http://jsbin.com/ipewe/edit

60
Dhana

更新：

JQuery 1.6以降では、prop()の代わりに attr() を使用する必要があります。

特定の状況では、属性とプロパティの違いが重要になる場合があります。 jQuery 1.6より前では、.attr（）メソッドは、一部の属性を取得するときにプロパティ値を考慮に入れることがあり、一貫性のない動作を引き起こす可能性がありました。 jQuery 1.6では、.prop（）メソッドはプロパティ値を明示的に取得する方法を提供しますが、.attr（）は属性を取得します。

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


元の回答：

オプションの値で選択する場合、その位置に関係なく（この例では、選択用のIDがあると仮定しています）：

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

「選択解除」する必要はありません。別の選択をすると自動的に行われます。

115
GtotheB

バージョン1.6.1以降では、selected、readonly、enabledなどのブール属性/プロパティにメソッドpropを使用することをお勧めします...

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

詳細については、 http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/ を参照してください。

17
Can Ho

使用できます

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

または

$('option:selected + option')

そして値を設定します：

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

また、selectのIDを指定する場合：

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

Idが「nextPageLink」のアイテムをクリックすると、nextオプションが選択され、onChange（）イベントが呼び出されます。次のようになります。

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

OnChange（）イベントはAjaxを使用して、指定されたdivに何かをロードします。

window.location.pathname =実際のアドレス

OnChange（）イベントは、netx/prevボタンを使用するだけでなく、標準選択を直接使用して値を変更できるため、定義されています。値が変更されると、ページは自動的に何らかの処理を行います。

3
Racky

これは私がちょうど使用したものです、私はそれがどれくらいきれいであるのが好きです:-)

$('select').val(function(){
    var nextOption = $(this).children(':selected').next();
    return $(nextOption).val();
}).change();
1
Andy
$('your_select option:selected').next('option').prop('selected', true)
1
Memonic
$('#my_sel').val($('#my_sel option:selected').next().val());
$('#my_sel').val($('#my_sel option:selected').prev().val());
0
Krishna Murthy

行を見つけて、

var row = $('#yourTable');

選択したい値

var theValue = "5";
row.find("select:eq(2)").find("option[value="+theValue+']').attr('selected','selected');
0
Vins
  $("select").prop("selectedIndex",$("select").prop("selectedIndex")+1)
0
zloctb
$('#next').click( function(){
    $('#colored_background option:selected').next('option').attr('selected', 'selected');
    changeBackgroundColor();
});

私の好きな色は何ですか？ で働いています。矢印をクリックします。

0
David Lefkon