web-dev-qa-db-ja.com

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

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

$("#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>

しかしこれはうまくいきません。何か案は？

jqueryhtmljquery-selectorshtml-select
313
Artjom Zabelin

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

$(function() {
    $("#gate").val('gateway_2');
});
452
Darin Dimitrov
$(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
});
148
Zkoh

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

31
Marty Hirsch

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 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);
15
Mike
  $("#form-field").val("5").trigger("change");
9
Mohd Bashir

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

JQueryを$(document).ready()ハンドラで宣言する必要があるかもしれません。

また、同じIDを持つ2つの要素があるでしょうか。

6
James Wiseman

これは別の選択肢になります。

$('.id_100 option[value=val2]').prop('selected', true);
5
Kent Aguilar

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

解決策：リフレッシュを追加してください。

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

私の問題

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
Korah

私は答えの繰り返しがいくつかあることを知っていますが、今これは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>
1
SyWill

いくつかのケースがあります 

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