jQueryで<select>の最初のオプションを選択状態にする方法
質問
jQueryで最初のオプションを選択するにはどうすればよいですか?
<select id="target">
<option value="1">...</option>
<option value="2">...</option>
</select>
解決
$("#target").val($("#target option:first").val());
他のヒント
これを試すことができます
$("#target").prop("selectedIndex", 0);
// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
function() {
$(this).removeAttr('selected');
}
);
// mark the first option as selected
$("#target option:first").attr('selected','selected');
使用する場合
$("#target").val($("#target option:first").val());
最初のオプション値がnullの場合、ChromeとSafariでは機能しません。
私は好む
$("#target option:first").attr('selected','selected');
すべてのブラウザで機能するため。
選択入力の値を変更するか、選択した属性を調整すると、DOM要素のデフォルトのselectedOptionsプロパティが上書きされ、リセットイベントが呼び出されたフォームで要素が正しくリセットされない可能性があります。
jQueryのpropメソッドを使用して、必要なオプションをクリアおよび設定します。
$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");
$("#target")[0].selectedIndex = 0;
私が考える微妙な点の1つは、選択した値を正しく変更しても、ユーザーに表示される要素は更新しないということです(クリックした場合のみ)ウィジェットでは、更新された要素の横にチェックが表示されます)。
.change()呼び出しを最後まで実行すると、UIウィジェットも更新されます。
$("#target").val($("#target option:first").val()).change();
(jQuery MobileとChromeデスクトップでボックスを使用しているときにこれに気づいたので、どこでもそうではないかもしれません)。
オプションを無効にしている場合、 not([disabled])を追加して、オプションを選択できないようにします。結果は次のようになります。
$("#target option:not([disabled]):first").attr('selected','selected')
値をリセットする別の方法(複数の選択された要素の場合)は次のようになります:
$("selector").each(function(){
/*Perform any check and validation if needed for each item */
/*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */
this.selectedIndex=0;
});
$('#newType option:first').prop('selected', true);
そのような単純な:
$('#target option:first').prop('selected', true);
すでに選択された属性がある場合、attr selectedの設定だけでは機能しないことがわかりました。現在使用しているコードは、最初に選択した属性の設定を解除してから、最初のオプションを選択します。
$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');
ここに私がそれをする方法があります:
$("#target option")
.removeAttr('selected')
.find(':first') // You can also use .find('[value=MyVal]')
.attr('selected','selected');
各機能はおそらく必要ではありませんが...
$('select').each(function(){
$(this).find('option:first').prop('selected', 'selected');
});
私のために働く。
このように、最後にtrigger( 'change')を使用するだけで機能しました:
$("#target option:first").attr('selected','selected').trigger('change');
最初のオプションをデフォルトとして使用する場合
<select>
<option value="">Please select an option below</option>
...
次のように使用できます:
$('select').val('');
すてきでシンプルです。
James Lee Baker の返信を踏まえると、:first :selected ... に対するブラウザーのサポートへの依存がなくなるため、私はこのソリューションを好みます。
$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');
私にとっては、次のコードを追加したときにのみ機能しました:
.change();
私にとっては、次のコードを追加したときにのみ機能しました: 「リセット」したかったのでフォーム、つまり、フォームのすべての選択の最初のオプションをすべて選択するには、次のコードを使用しました。
$( 'form')。find( 'select')。each(function(){
$(this).val($(&quot; select option:first&quot;)。val());
$(this).change();
});
$("#target").val(null);
クロムで正常に動作しました
select要素のjQueryオブジェクトを保存している場合:
var jQuerySelectObject = $("...");
...
jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());
jQueryと ECMAScript&nbsp; 6 を使用して、この最適なアプローチを確認してください。
$('select').each((i, item) => {
var $item = $(item);
$item.val($item.find('option:first').val());
});
私にとっては、次のコード行を追加したときにのみ機能しました
$('#target').val($('#target').find("option:first").val());
dropdown
からオプションを選択して使用できます。
// 'N' can by any number of option. // e.g., N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val());
$( 'select#id')。val($( '#id option')[index] .value)
id を特定のselectタグidに、 index を選択する特定の要素に置き換えます。
i.e。
<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
<option value="AB">AB</option>
<option value="AK">AK</option>
<option value="AL">AL</option>
</select>
ここで、最初の要素選択のために、次のコードを使用します:
$('select#ddlState').val($('#ddlState option')[0].value)
これは私のために働いた!
$("#target").prop("selectedIndex", 0);
使用:
alert($( "#target option:first" ).text());