下面的代码为什么不能添加Option？？？

Question

以前也遇到过,后来发现用DOM对象可以添加,代码如下:
<select id="mySelect" style="width:205"></select>
<SCRIPT type="text/javascript">
  var str = "<OPTION VALUE=1>HEHEHEHEHE</OPTION>";
  var objOption = document.createElement("option");
  objOption.innerText = str;
  document.getElementById('mySelect').appendChild(objOption);
</SCRIPT>

Answer 1

单纯插入html是无效的，建议用楼上的方法或者
改变options.length和新增option.text/value

Answer 2

这个问题我也遇到过，需要这么写才行
<select id="mySelect"></select><SCRIPT type="text/javascript">
  var str = "<select id='mySelect'><OPTION VALUE=1>HEHEHEHEHE</OPTION></select>";
  document.getElementById('mySelect').outerHTML = str;
</SCRIPT>

Answer 3

<select id="mySelect"></select><SCRIPT type="text/javascript">
function AddStrToSelect(idSelect, strAdd)
{
var objSelect = document.getElementById(idSelect);
var htmlBef = objSelect.outerHTML;
var pattern = /^(<.*>.*)(<.*>)$/g;
pattern.test(htmlBef);
objSelect.outerHTML = RegExp.$1 + strAdd + RegExp.$2;
}var str1 = "<OPTION VALUE=1>HEHEHEHEHE1</OPTION>";
AddStrToSelect("mySelect", str1);
var str2 = "<OPTION VALUE=1>HEHEHEHEHE2</OPTION>";
AddStrToSelect("mySelect", str2);
</SCRIPT>

Answer 4

上面的方法都不是跨浏览器的，主要select的createElement/outerHTML在mozilla都未能很好支持
给你两个跨浏览器的代码，不难理解，比outterHTML更容易写方法1.
<select id="mySelect" onchange="alert(this.value);">
<option value="0">AAA</option>
<option value="1">BBB</option>
</select><SCRIPT type="text/javascript">
obj = document.getElementById("mySelect");
obj.options.length=4;
obj.options[2].text = "CCC";
obj.options[3].text = "DDD";
obj.options[2].value = "2";
obj.options[3].value = "3";
</SCRIPT>
原理：改变options集合的个数
当length>目前，在最后添加，并且text/value均为空，显示空白的选项相当于<option></option>
当<目前，减少最后几项
=就没有改变
后面的text/value就是改变指定某项的属性方法2.
<select id="mySelect" onchange="alert(this.value);">
<option value="0">AAA</option>
<option value="1">BBB</option>
</select><SCRIPT type="text/javascript">
obj = document.getElementById("mySelect");
obj.options[2] = new Option("CCC","2")
</SCRIPT>
这个来得更简单注意：
1.options下标从0开始，index没有写对的话将变成刷写原有选项（当然这是另一种情况的有用方法）
2.如果要在几个option中间插入，只能把length=0然后重写所有option

Answer 5

啊，刚找到这个，也是跨浏览器的，可以任意地方插入
不过听讲要ie 5.5+，具体我没有ie5无法测试<select id="mySelect" onchange="alert(this.value);">
<option value="0">AAA</option>
<option value="1">BBB</option>
</select><SCRIPT type="text/javascript">
obj = document.getElementById("mySelect");
var option = new Option("CCC","2");
obj.options.add(option,1);
</SCRIPT>