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/
相關文章
- javascript操作Select中的options集合JavaScript
- js如何動態為select下拉選單新增option項JS
- javascript操作Select標記中options集合JavaScript
- js動態新增svgJSSVG
- angularjs: ng-select和ng-optionsAngularJS
- JavaScript動態操作select下拉選單JavaScript
- JavaScript select options 集合JavaScript
- Js操作Select大全JS
- js 操作select和optionJS
- 如何在下拉框Select中動態新增option?
- JQuery 對 Select option 的操作jQuery
- Vue+Element+JS動態生成form表單實現新增和刪除操作VueJSORM
- js動態建立div再新增文字程式碼JS
- JS操作Radio與SelectJS
- 通過ajax方式動態新增select下拉選單的option選項
- JS/JQ動態建立(新增)optgroup和option屬性JS
- 使用js動態新增連結隨機連結JS隨機
- js如何動態為指定的元素新增內容JS
- jquery動態設定selectjQuery
- html select動態賦值HTML賦值
- [JS]bootstrapTable新增操作按鈕JSbootAPT
- 不重新整理頁面動態更新select選項,實現兩個select相互操作 (轉)
- js 動態新增class封裝(es6語法)JS封裝
- js動態新增、刪除table中的tr、td、inputJS
- Oracle DML(非select) 操作不commit 對select的影響OracleMIT
- mybatis Selective動態判斷屬性值新增或修改操作,batch批次操作MyBatis
- mobx動態新增observable
- RecyclerView新增動態水印View
- VOL表格動態新增操作按鈕及彈窗確認方法
- js動態在一個元素中新增另一個元素JS
- js如何動態在div中新增一個新的元素JS
- JSP頁面動態生成表格併為表格新增事件JS事件
- Js操作Select大全(取值、設定選中等等)JS
- Vue select 繫結動態變數Vue變數
- JavaScript 動態生成select下拉選單JavaScript
- JavaScript動態建立select下拉選單JavaScript
- jquery為動態新增元素新增事件薦jQuery事件
- 動態JSJS