あなたがインデックス、値、またはテキストを知っているなら。直接参照用のIDがない場合も同様です。
マークアップ例
<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>
値によって中央の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')
編集2:ライアンのコメントの後。 「選択10」の一致は望ましくないかもしれません。私は見つかりませんでしたセレクタ全文に一致するが、フィルタ動作します:
$('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})
編集3:に注意してください$(e).text()
改行が含まれる可能性があるため、比較は失敗します。これはオプションが暗黙的に閉じられているときに起こります(no</option>
タグ):
<select ...>
<option value="1">Selection 1
<option value="2'>Selection 2
:
単に使うならe.text
末尾の改行のような余分な空白は削除され、比較がより堅牢になります。
上記の方法のどれもが私が必要とする解決策を提供しなかったので、私は私のために働いたものを提供するだろうと考えました。
$('#element option[value="no"]').attr("selected", "selected");
prop
ではなくattr
。 - Gone Coding.attr
正しい。 「選択」 < option>の属性です。w3.org/TR/html5/forms.html#attr-option-selected - Carlos Llongoprop
に優先してattr
。これは、それが属性にすぎないか、または補助的なアクションで実装されているかどうかを確認するために、w3.orgのすべてのプロパティを調べる必要がなくなります。 - Gone Coding
そのまま使えますval()
方法:
$('select').val('the_value');
the_value
。 .valはセレクタ/フィルタ機能ではありません。これはプロパティアクセサであり、その文字列を渡すと値が設定されます。私は私の投票を取り戻そうとしましたが、私がテストでこれを思い出した後は遅すぎました。 - AaronLS
値では、私にとって何がうまくいったかjQuery 1.7以下のコードでした、これを試してください:
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
.change()
必要でした。 SELECTに基づいてサムネイルを切り替える例を示しました。カスタムテーマをアップロードしたときに、[カスタムテーマ]を選択するはずでした。オプションのリストから。の.prop()
コールは機能しましたが、なし.change()
、私の選択の右側にあるサムネイル画像が更新されることはありません。 - Volomikeprop
valueは同じ出力を生成します。例えば.prop('selected', true)
- Gone Coding
あなたはselectに名前を付けてこれを使うことができます:
$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);
それはあなたが望むオプションを選択するはずです。
これを行うにはいくつかの方法がありますが、最も優れた回答と多くの議論の中で最もクリーンなアプローチが失われています。val()
。 jQuery 1.6から一部のメソッドも変更されたため、これには更新が必要です。
以下の例では、変数を仮定します。$select
目的のを指すjQueryオブジェクトです。<select>
タグ、例えば以下を介して:
var $select = $('.selDiv .opts');
値のマッチングにはval()
属性セレクタを使用するよりもはるかに簡単です。https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
のセッターバージョン.val()
に実装されていますselect
設定によるタグselected
マッチングのプロパティoption
同じでvalue
そのため、最近のすべてのブラウザで問題なく動作します。
オプションの選択状態を直接設定したい場合は、prop
(ないattr
) とともにboolean
テキスト値ではなくパラメータselected
):
gt;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
機能付き。例えば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";
インデックスで一致させたい場合は、単にselectの子にインデックスを付けてください。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
私はこれを使います、私がリストのインデックスを知っているとき。
$("#yourlist :nth(1)").prop("selected","selected").change();
これにより、リストを変更してchangeイベントを発生させることができます。 ":nth(n)"はインデックス0から数えている
私は一緒に行きます: -
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
トリガを選択して選択値を設定する場合
$('select.opts').val('SEL1').change();
スコープからオプションを設定する場合
$('.selDiv option[value="SEL1"]')
.attr('selected', 'selected')
.change();
このコードはselectorを使用して条件付きの選択オブジェクトを見つけ、それから選択された属性を次のように変更します。attr()
。
さらに、追加することをお勧めしますchange()
属性をに設定した後のイベントselected
こうすることで、コードはユーザーによる選択の変更に近くなります。
#idの代わりにselect field idを使うだけです(つまり#select_name)。
の代わりにオプション値選択オプションを使う値
<script>
$(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
});
</script>
/* This will reset your select box with "-- Please Select --" */
<script>
$(document).ready(function() {
$("#gate option[value='']").prop('selected', true);
});
</script>
属性をfunctionに送信し、update-selectオプションが必要な場合に選択されたJqueryの場合
$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');
まさにそれはうまくいくでしょう
<script>
$(document).ready(function() {
$("#id").val('select value here');
});
</script>
の$('select').val('the_value');
正しい解決策に見えますし、データテーブルの行がある場合は、
$row.find('#component').val('All');
jQueryを使用したくない場合は、以下のコードを使用できます。
document.getElementById("mySelect").selectedIndex = "2";
質問ありがとうございます。このコードがうまくいくことを願っています。
var val = $("select.opts:visible option:selected ").val();
$("#my_select").val("the_new_value").change();
... ...からそう - dsdsdsdsd