JS两种增加SELECT 下的option方法

 

第一种方法:

<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>