選択ボックスの選択オプションを設定する


352

以前に選択したオプションをページの読み込み時に表示するように設定したい。私は次のコードでそれを試しました:

$("#gate").val('Gateway 2');

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>

しかし、これは機能しません。何か案は?


10
実際にそれがどのように機能するかです、本当にdocument.ready()に値を設定しますか?selectboxの準備がまだ整っていないときにコードが実行される可能性があります。
Morph

回答:


496

これは間違いなく動作するはずです。こちらがデモです。コードをに配置したことを確認してください$(document).ready

$(function() {
    $("#gate").val('gateway_2');
});

4
はい

2
ああ、私はそれをドキュメントレディ機能ではないと宣言しました...
11

7
属性 "selected"を "selected"に設定するほど良くありません。
Adal 2013年

6
@Adalなぜこれが「selected」属性を「selected」に設定するほど良くないのですか?
Shawn

26
誰かが不思議に思った場合に'Gateway 2'備えて、関数に渡されるのは、テキストではなく、選択オプションの属性のval値と一致valueします。私の意味の例については、非常に穏やかに編集されたDarinのデモのJSFiddleを参照してください。
ケニーエビット2014

166
$(document).ready(function() {
    $("#gate option[value='Gateway 2']").prop('selected', true);
    // you need to specify id of combo to set right combo, if more than one combo
});

37

$('#gate').val('Gateway 2').prop('selected', true);


2
$('#your-select-box-id :nth-child(2)').prop('selected', true)ドロップボックスの視覚的な更新により、どれが機能するかと非常に似ています。
ビッグリッチ

私のために働いた唯一のもの。カスタム選択ライブラリを使用しているため、疑わしいです。
Louis M.

15

jQuery .val()メソッドを使用すると、重大な欠点があることがわかりました。

<select id="gate"></select>
$("#gate").val("Gateway 2");

この選択ボックス(またはその他の入力オブジェクト)がフォーム内にあり、フォームで使用されるリセットボタンがある場合、リセットボタンをクリックすると、設定値がクリアされ、期待どおりに初期値にリセットされません。

これは私にとって最もうまくいくようです。

セレクトボックス用

<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);

テキスト入力用

<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")

textarea入力の場合

<textarea id="gate"></textarea>
$("#gate").html("your desired value")

チェックボックスの場合

<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);

ラジオボタン用

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);

12
  $("#form-field").val("5").trigger("change");

1
これに関するいくつかの情報を含めていただければ幸いです。これは、選択に対する変更を監視しているコードがある場合に、これを実行する方法の良い例です。
sean.boyer 2017

6

それはうまくいきます。このフィドルを参照してください:http : //jsfiddle.net/kveAL/

$(document).ready()ハンドラーでjQueryを宣言する必要がある可能性はありますか?

また、同じIDを持つ2つの要素があるかもしれませんか?



6

私も同じ問題を抱えていました。

解決策:更新を追加します。

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');

3
これはjqueryuiのselectmenu専用であり、標準のhtmlではありません
stuartdotnet

3

私はいくつかの回答の反復があることを知っていますが、これはjqueryや他の外部ライブラリを必要とせず、次のようにして簡単に達成できます。

document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true);
<select id="gate">
    <option value='null'>- choose -</option>
    <option value='Gateway 1'>Gateway 1</option>
    <option value='Gateway 2'>Gateway 2</option>
</select>


素晴らしいソリューション。ただし、以前に選択したオプションから選択した属性が削除されないようです
Systems Rebooter

3

場合によっては

$('#gate option[value='+data.Gateway2+']').attr('selected', true);

1

私の問題

get_courses(); //// To load the course list
$("#course").val(course); //// Setting default value of the list

同じ問題がありました。あなたのコードとの唯一の違いは、ajax呼び出しを通じて選択ボックスを読み込んでいたことと、ajax呼び出しが実行されるとすぐに、選択ボックスのデフォルト値を設定したことです。

ソリューション

get_courses();
   setTimeout(function() {
     $("#course").val(course);
  }, 10);

1
あなたは問題を正しく分析しましたが、解決策は悪いもので壊れやすいものです。ajax呼び出しに添付されたコールバック関数を使用する必要があります
icksde

-1

呼び出し前の構文エラーのため、値が設定されないという問題がありました。

$("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val
$("#gate").val('Gateway 2'); //this line didn't work.

呼び出しの前に構文エラーを確認してください。


4
構文エラーをチェックするように促すのと同じくらい便利ですが、これは答えではありません。
Shotgun Ninja


-2
// Make option have a "selected" attribute using jQuery

var yourValue = "Gateway 2";

$("#gate").find('option').each(function( i, opt ) {
    if( opt.value === yourValue ) 
        $(opt).attr('selected', 'selected');
});

1
これは選択した値を超えてもループするため、非効率的です
Daniel Nuriyev

プラス.attr()は、この回答が投稿されるずっと前からこれを行うには間違った方法でした。
Auspex 2015年

-2

@icksdeおよび@Korahへの追加(両方とも!)

AJAXでオプションを構築する場合、リストが構築される前にdocument.readyがトリガーされる可能性があるため、

これは機能しません

$(document).ready(function() {
    $("#gate").val('Gateway 2');
});

これは

タイムアウトは機能しますが、@ icksdeが言うように脆弱です(実際には、10ミリ秒ではなく20ミリ秒必要でした)。次のようにAJAX関数内に収めることをお勧めします。

$("#someObject").change(function() {
    $.get("website/page.php", {parameters}, function(data) {
        $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
        $("#gate").val('Gateway 2');
    }, "json");
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.