web-dev-qa-db-ja.com

JavaScript / jQueryを使用してドロップダウンのオプションを設定する方法は？

Javascriptまたはjqueryを使用してドロップダウンメニューのオプションと値を設定する方法を誰かが知っていますか？私はこのHTMLを使用しています：

<select size="1" id="D1">
</select>

助けてくれてありがとう。

javascriptjquerydrop-down-menu
19
Joey Morani

JQueryは必ずしも必要ではありません。

var select = document.getElementById("D1"),
    opt = document.createElement("option");
opt.value = "value";
opt.textContent = "text to be displayed";
select.appendChild(opt);

例 。

しかし、ここではとにかくjQueryを使用しています。

$("select#D1").append( $("<option>")
    .val("value")
    .html("text to be displayed")
);

例 。

45
Purag

selectの-​​ メソッドの追加 を使用するさらに別の方法：

var select = $("#select")[0];

select.add(new Option("one", 1));
select.add(new Option("two", 2));
select.add(new Option("three", 3));

例：http://jsfiddle.net/pc9Dz/

または、selectのoptionsコレクションに値を直接割り当てることにより、

var select = $("#select")[0];

select.options[0] = new Option("one", 1);
select.options[1] = new Option("two", 2);
12
Andrew Whitaker

次に、options配列を使用してjavascript（Andrew Whitakerの回答と同様）を使用してオプションを削除する別の方法を示します。

var select = document.getElementById("D1");
select.options.length = 0;//remove all options
2
Michael Stalcup

いくつかの方法があります。 1つは次のとおりです。

$("#D1").append("<option>Fred</option>");
2
scrappedcola
$("#dropdown").html("<option value='val1'>label 1</option><option value='val2' selected='selected'>label 2</option>");
0
lubosdz