Question

可能重复：
  append option to select menu?
  how do I add an option to a html form dropdown list with javascript

我有一个html选择元素，如下面的

<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');

然后将选项添加到select的options集合中，如此

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

Working example

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>

html（下拉列表）选择选项和javascript

4 个答案: