web-dev-qa-db-ja.com

Vanilla javascriptの既存の選択にオプションを動的に追加する方法

プレーンjavascriptを使用して動的に選択にオプションを追加したいと思います。私が見つけることができるものはすべて、JQueryを含むか、選択を動的に作成しようとします。私が見つけた最も近いものは Javascriptのオプションで動的に入力タイプの選択を追加する であり、後者を行い、JQueryを含まない唯一の方法でした。私はそれを次のように試して使用しましたが：

daySelect = document.getElementById('daySelect');
daySelect.innerHTML += "<option'>Hello world</option'>";
alert(daySelect.innerHTML)

これを行った後、選択に変更はなく、アラートが表示されました

HELLO WORLD</option'>

これが単純な場合は謝罪しますが、私はjavascriptとWebプログラミング全般に非常に不慣れです。ご協力ありがとうございます。

編集：だから私はそのように与えられた提案を試みた。

daySelect = document.getElementById('daySelect');
myOption = document.createElement("option");
myOption.text = "Hello World";
myOption.value = "Hello World";
daySelect.appendChild(myOption);

これは、ページの選択をまったく変更していません。理由は何ですか？そして、アラートでコードが実行されていることを確認しました。

編集：アイデアは機能しましたが、ドロップダウンに値が表示されていないことがわかりました。理由はわかりませんが、私はそれを理解できます。

javascriptselect
42
avorum

このチュートリアルでは、必要な作業を正確に示します。 javascriptを使用してHTML選択ボックスにオプションを追加

基本的に：

 daySelect = document.getElementById('daySelect');
 daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');
76
Drew

私はこのような何かが仕事をするだろうと思います。

var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("daySelect");
select.appendChild(option);
17
intuitivepixel

Document.createElement関数を使用して、選択の子として追加します。

var newOption = document.createElement("option");
newOption.text = 'the options text';
newOption.value = 'some value if you want it';
daySelect.appendChild(newOption);
5
Lochemage

.add（）も機能します。

var daySelect = document.getElementById("myDaySelect");
var myOption = document.createElement("option");
myOption.text = "test";
myOption.value = "value";
daySelect.add(option);

W3スクール-トライ

0
Esteban Lezama

最も簡単な方法は次のとおりです。

selectElement.add(new Option('Text', 'value'));

はい、それは簡単です。 IE8でも機能します。その他のオプションのパラメーターがあります。

ドキュメントを参照してください：
HTMLSelect Element .add （item [、before]）;
新しいオプション （テキスト、値、defaultSelected、選択済み）;

0
user

これを試して;

   var data = "";
   data = "<option value = Some value> Some Option </option>";         
   options = [];
   options.Push(data);
   select = document.getElementById("drop_down_id");
   select.innerHTML = optionsHTML.join('\n');
0
user28864