JS對select動態新增options操作[IE&FireFox相容]

做一個專案,遇到了要動態調整 select 選項的情況,就baidu了一下,發現了一篇與本文同名的帖子.

但是呢,那個帖子裡的方法並不相容.  

附原文:

<select id="ddlResourceType" onchange="getvalue(this)">
</select>

   動態刪除select中的所有options：
       document.getElementById("ddlResourceType").options.length=0;

     動態刪除select中的某一項option：
       document.getElementById("ddlResourceType").options.remove(indx);  
//就是這句不相容了,Firefox是不懂 remove 這個方法的,所以會報錯了,當然也移除不了了

    動態新增select中的項option:
       document.getElementById("ddlResourceType").options.add(new Option(text,value));

   上面在IE和FireFox都能測試成功，希望以後你可以用上。
其實用標準的DOM操作也可以，就是document.createElement，appendChild，removeChild之類的。

    取值方面
    function getvalue(obj)
     {
         var m=obj.options[obj.selectedIndex].value
         alert(m);//獲取value
         var n=obj.options[obj.selectedIndex].text
         alert(n);//獲取文字
     }

後來,發現這篇文章末端的那幾句話,覺得可以用dom試試,嗯,果然可行.

var sObj=document.getElementById("ddlResourceType");

sObj.removeChild(sObj.options[indx]);

這樣,上面這句就做到相容了.

其他的程式碼都沒有問題,可以相容. 

 

1 檢測是否有選中
if (objSelect.selectedIndex > - 1 ) {
// 說明選中
} else {
// 說明沒有選中
}

2 刪除被選中的項
objSelect.options[objSelect.selectedIndex] = null ;

3 增加項
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );

4 修改所選擇中的項
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );

5 得到所選擇項的文字
objSelect.options[objSelect.selectedIndex].text;

6 得到所選擇項的值
objSelect.options[objSelect.selectedIndex].value;

 

轉至：http://lulitianyu.blog.163.com/blog/static/91360302007112710574596/