回答:
中央のoption-elementを値で取得するセレクターは
$('.selDiv option[value="SEL1"]')
インデックスの場合:
$('.selDiv option:eq(1)')
既知のテキストの場合:
$('.selDiv option:contains("Selection 1")')
編集:上記でコメントしたように、OPはドロップダウンの選択された項目を変更した後である可能性があります。バージョン1.6以降では、prop()メソッドが推奨されます。
$('.selDiv option:eq(1)').prop('selected', true)
古いバージョンでは:
$('.selDiv option:eq(1)').attr('selected', 'selected')
EDIT2:ライアンのコメントの後。「セレクション10」での試合は望ましくないかもしれません。全文に一致するセレクターは見つかりませんでしたが、フィルターは機能します。
$('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})
EDIT3:$(e).text()
比較に失敗する改行が含まれる可能性があるため、注意して使用してください。これは、オプションが暗黙的に閉じられている場合に発生します(</option>
タグなし)。
<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
:
</select>
e.text
末尾の改行のような余分な空白を単に使用すると、比較がより堅牢になります。
上記のいずれの方法でも必要な解決策が提供されなかったため、自分にとって有効な方法を提供できると考えました。
$('#element option[value="no"]').attr("selected", "selected");
prop
しないでくださいattr
。
.attr
は正しいです。「selected」は、<option> w3.org/TR/html5/forms.html#attr-option-selected
prop
を優先して使用することattr
です。これにより、属性のみであるか、バッキングアクションで実装されているかを確認するために、w3.orgのすべてのプロパティを検索する必要がなくなります。
あなたはval()
メソッドを使うことができます:
$('select').val('the_value');
the_value
。.valはセレクター/フィルター機能ではありません!これはプロパティアクセサーであり、その文字列に値を設定します。私は賛成票を取り戻そうとしましたが、テストでこれを実現した後は遅すぎました。
値によって、jQuery 1.7で私のために働いたのは以下のコードでした、これを試してください:
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
.change()
必要がありました。SELECTに基づいてサムネイルを切り替える例がありました。カスタムテーマをアップロードすると、オプションのリストから[カスタムテーマ]が選択されるはずでした。.prop()
コールは働いたが、なくて.change()
、私の選択の右側にサムネイル画像が更新されません。
prop
値でも同じ出力が生成されます。例.prop('selected', true)
これを行うにはいくつかの方法がありますが、最も明確なアプローチは、トップの回答とに関する大量の議論の中で失われていますval()
。また、jQuery 1.6の時点で一部のメソッドが変更されたため、これには更新が必要です。
次の例では、変数$select
が<select>
、たとえば次のように、目的のタグを指すjQueryオブジェクトであると想定します。
var $select = $('.selDiv .opts');
値の一致についてval()
は、属性セレクターを使用するよりもはるかに単純です。https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
セッターのバージョン.val()
に実装されてselect
設定することにより、タグselected
のマッチングのプロパティoption
と同じとはvalue
、そのすべての最新ブラウザ上でうまく動作します。
あなたが直接オプションの選択状態を設定したい場合は、使用することができますprop
(ないattr
と)boolean
パラメータ(というよりもテキスト値selected
):
例:https : //jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tag
を使用してval()
を選択して<option>
も、valが一致しない場合(値のソースによっては発生する可能性があります)、「nothing」が選択され、$select.val()
が返されnull
ます。
したがって、示されている例の場合、および堅牢性のために、次のようなものを使用できますhttps://jsfiddle.net/1250Ldqn/:
var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
$select.val("DEFAULT");
}
完全なテキストで照合する場合は、filter
with関数を使用できます。例:https : //jsfiddle.net/yz7tu49b/2/:
var $select = $('.selDiv .opts');
$select.children().filter(function(){
return this.text == "Selection 2";
}).prop('selected', true);
余分な空白がある場合は、次のようにチェックにトリムを追加することができます
return $.trim(this.text) == "some value to match";
インデックスで一致させたい場合は、選択の子にインデックスを付けるだけです。例:https : //jsfiddle.net/yz7tu49b/3/
var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;
私は最近、jQueryを支持して直接DOMプロパティを回避する傾向がありますが、将来を見据えたコードを使用するため、https://jsfiddle.net/yz7tu49b/5/としても実行できます。
var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);
上記のすべてのケースで、変更イベントは発生しません。これは、再帰的な変更イベントが発生しないように設計されています。
changeイベントを生成するには、必要に応じ.change()
て、jQuery select
オブジェクトへの呼び出しを追加します。たとえば、最初の最も簡単な例はhttps://jsfiddle.net/yz7tu49b/7/になります。
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
など[value="SEL2"]
、属性セレクターを使用して要素を検索する方法は他にもたくさんありますが、属性セレクターは他のすべてのオプションに比べて比較的遅いことを覚えておく必要があります。
$(elem).find('option[value="' + value + '"]').attr("selected", "selected");
ドキュメンテーションに関する自分の質問への回答。これを達成する他の方法があると確信していますが、これは機能し、このコードはテストされています。
<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">
$(function() {
$(".update").bind("click", // bind the click event to a div
function() {
var selectOption = $('.selDiv').children('.opts') ;
var _this = $(this).next().children(".opts") ;
$(selectOption).find("option[index='0']").attr("selected","selected");
// $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
// $(selectOption).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[value='DEFAULT']").attr("selected","selected");
// $(_this).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[index='0']").attr("selected","selected");
}); // END Bind
}); // End eventlistener
</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
<select class="opts">
<option selected value="DEFAULT">Default</option>
<option value="SEL1">Selection 1</option>
<option value="SEL2">Selection 2</option>
</select>
</div>
</body>
</html>
jquery-2.1.4を使用して、私は次の答えを見つけました:
$('#MySelectionBox').val(123).change();
文字列値がある場合は、以下を試してください。
$('#MySelectionBox').val("extra thing").change();
他の例ではうまくいかなかったので、この回答を追加します。
私は元の答えを見つけました:https : //forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu
トリガーを選択して選択値を設定する場合:
$('select.opts').val('SEL1').change();
スコープからオプションを設定する場合:
$('.selDiv option[value="SEL1"]')
.attr('selected', 'selected')
.change();
このコードは、セレクターを使用して条件付きの選択オブジェクトを見つけ、選択された属性をで変更しますattr()
。
さらに、change()
属性をに設定した後にイベントを追加することをお勧めしselected
ます。これにより、コードはユーザーによる選択の変更に近くなります。
私は一緒に行きます:-
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
属性を関数に送信し、更新選択オプションが必要な場合に選択されたjqueryの場合
$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');
$("#my_select").val("the_new_value").change();
... ...からそう