javascript - html（ドロップダウン）オプションとjavascriptを選択

Question

重複の可能性：
メニューを選択するためのオプションを追加しますか？
javascriptを使用してhtmlフォームのドロップダウンリストにオプションを追加するにはどうすればよいですか

私は以下のようなhtmlselect要素を持っています

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form> 

javascript（jQueryではない）を使用して、以下のような別のオプション値を追加したい

<option>Berry</option> 

誰かが私がそれをどのように行うことができると言うことができますか？

ありがとう

Answer 1

まず、を使用して選択を取得しますdocument.getElementById

var sel = document.getElementById('mySelect');

次に、このように選択のoptionsコレクションにオプションを追加します

sel.options.add(new Option('text', 'val'));

実例

Answer 2

//Declare some variables
var ctn = "Berry",
    opt = document.createElement("option");

//Set the text
opt.innerText = ctn;

//Put it in
document.getElementById('mySelect').appendChild(opt);

ライブデモ： http： //jsfiddle.net/DerekL/BzZXn/

これは、すべてのHTMLタグにも当てはまります。

Answer 3

var x=document.getElementById("mySelect");
var option=document.createElement("option");
option.text="Kiwi";
try{
  // for IE earlier than version 8
  x.add(option,x.options[null]);
}
catch (e){
  x.add(option,null);
}

Answer 4

    <script type="text/javascript">
function fnc()
{
document.getElementById("mySelect").options.add(new Option('berry'));
}
</script>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
<input type="button" onclick="fnc()" />
</form>