如何动态生成下拉列表中的选项

Question

[obj].options.add(new Option("aa" ,"11")); //增加
[obj].options.delete(i); //删除

Answer 1

<select id=tst></select>
<script>
var obj = document.getElementById('tst');
alert(obj.length);   // 查看 select 的元素数量
obj.length ++;     // 增加一个元素
alert(obj.length);
obj.length = 20;   // 设置元素为 20 个
alert(obj.length);
obj.length = 1;
obj.options[0].text = 'first option text';  // 设置第一个元素的文本信息
obj.options[0].value = '1st';              // 设置第一个元素的值信息
obj.length ++;
obj.options[obj.length - 1].text = 'second options text';
obj.options[obj.length - 1].value = '2nd';
obj.selectedIndex = obj.length - 1;   // 设置当前选中的元素索引号
obj.length ++;
obj.options[obj.length - 1].text = 'third options text';
obj.options[obj.length - 1].value = '3rd';
obj.removeChild(obj.childNodes[1]);  // 移除第二个元素
</script>

Answer 2

var oText = document.createTextNode("Text");
var oOption = document.createElement("option");oOption.appendChild(oText);var oList = document.getElementById("(列表的id)");
oList.appendChild(oOption);

Answer 3

删除：
   加入第i个：
   document.getElementById("(列表的id)").removeChild(document.getElementById("").options[i]);

Answer 4

<select id="tst"><option>1</option><option>2</option><option>3</option> </select> 
文本值<input type="text" id="stxt">
option值<input type="text" id="sval">
<input type="button" value="add" onclick="add()">
要删除的项<input type="text" id="iindex">
<input type="button" value="del" onclick="del()">
<script type="text/javascript">
function add(){
var sTxt=document.getElementById("stxt");
var sVal=document.getElementById("sval");
seladd(sTxt.value,sVal.value);
}
function del(){
var iIndex=document.getElementById("iindex");
seldel(iIndex.value);
}
function seladd(stext,svalue){
var oSel=document.getElementById("tst");
var oOpt=document.createElement("option");
var oText=document.createTextNode(stext);
oOpt.setAttribute("value",svalue);
oOpt.appendChild(oText);
oSel.appendChild(oOpt);
}
function seldel(index){
var oSel=document.getElementById("tst");
if(index>(oSel.length-1)){return alert("超出范围");}
oSel.remove(index);
}
</script>