您的位置:首页 > Web前端 > JavaScript

JS两种增加SELECT 下的option方法

2011-11-09 08:21 363 查看
第一种方法:

<script language="javascript">
window.onload = function() {
var opt = document.createElement('option');
opt.appendChild(document.createTextNode("上海"));
opt.setAttribute("value","C3");
sel.appendChild(opt);
};
</script>
<h1>表单</h1>
<form name="fm1" id="fm1" >
<select name="city">
<option value="A1">A</option>
<option selected="selected" value="B1">B</option>
<option value="C1">C</option>
</select>
<label>Label</label>
</form>


第二种方法:

<script language="javascript">
window.onload = function() {
var fm = document.getElementById('fm1'); var sel = fm.city;
var opt = new Option("上海","C3");
//有下标,与没有下标的状况IE与FIREFOX一样
addOpt(sel,opt);
addOpt(sel,opt,2);
};
/*FireFox: select.add(新加入的option,null);                  select.add(新加入的option,要放到哪个option之前的-Option对象);
IE     : select.add(新加入的option);                 select.add(新加入的option,下标);   */
function addOpt(sel,opt,index) {
//addOpt(Select对象,新加入的opt,插入的下标)
var IE = navigator.userAgent.indexOf("MSIE")>-1;
if (IE) {
sel.add(opt,index);
} else {
sel.add(opt,index===undefined?null:sel.options[index]);
}
return sel;
}
</script>
<h1>表单</h1>
<form name="fm1" id="fm1" >
<select name="city">
<option value="A1">A</option>
<option selected="selected" value="B1">B</option>
<option value="C1">C</option>
</select>
<label>Label</label>
</form>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: