JS對(duì)select控件option選項(xiàng)的增刪改查示例代碼

更新時(shí)間：2013年10月21日 16:23:30 作者：

Javascript操作select是表單中比較常見的，大家可以在網(wǎng)上搜索到很多的相關(guān)資料，接下來(lái)為大家詳細(xì)介紹下，JS動(dòng)態(tài)操作select中的各種方法，感興趣的朋友可以參考下

Javascript 操作select是表單中常見的一種,下面介紹幾種常用的JS動(dòng)態(tài)操作select中的各種方法：

復(fù)制代碼代碼如下:

 
//動(dòng)態(tài)創(chuàng)建select 
function createSelect() 
{ 
var mySelect = document.createElement("select"); 
mySelect.id = "mySelect"; 
document.body.appendChild(mySelect); 
} 

復(fù)制代碼代碼如下:

 
//添加選項(xiàng)option 
function addOption() 
{ 
//根據(jù)id查找對(duì)象， 
var obj=document.getElementById('mySelect'); 
//添加一個(gè)選項(xiàng) 
obj.add(new Option("文本","值")); //這個(gè)只能在IE中有效 
obj.options.add(new Option("text","value")); //這個(gè)兼容IE與firefox 
} 

復(fù)制代碼代碼如下:

 
//刪除所有選項(xiàng)option 
function removeAll() 
{ 
var obj=document.getElementById('mySelect'); 
obj.options.length=0; 
} 

復(fù)制代碼代碼如下:

 
//刪除一個(gè)選項(xiàng)option 
function removeOne() 
{ 
var obj=document.getElementById('mySelect'); 
//index,要?jiǎng)h除選項(xiàng)的序號(hào)，這里取當(dāng)前選中選項(xiàng)的序號(hào) 
var index=obj.selectedIndex; 
obj.options.remove(index); 
} 

復(fù)制代碼代碼如下:

 
//獲得選項(xiàng)option的文本 
var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序號(hào)，取當(dāng)前選中選項(xiàng)的序號(hào) 
var val = obj.options[index].text; 

復(fù)制代碼代碼如下:

 
//修改選項(xiàng)option 
var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序號(hào)，取當(dāng)前選中選項(xiàng)的序號(hào) 
var val = obj.options[index]=new Option("新文本","新值"); 

您可能感興趣的文章:

相關(guān)文章

引用 js在IE與FF之間的區(qū)別詳細(xì)解析
這篇文章主要介紹了js在IE與FF之間的區(qū)別。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)重定向的幾種方式
這篇文章主要介紹js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)重定向的幾種方式,需要的朋友可以參考下
2014-05-05
js實(shí)現(xiàn)搜索框關(guān)鍵字智能匹配代碼
這篇文章主要為大家分享了js實(shí)現(xiàn)搜索框關(guān)鍵字智能匹配代碼，感興趣的朋友可以參考一下
2016-01-01
JS中檢測(cè)數(shù)據(jù)類型的幾種方式及優(yōu)缺點(diǎn)小結(jié)
這篇文章主要介紹了JS中檢測(cè)數(shù)據(jù)類型的幾種方式及優(yōu)缺點(diǎn)小結(jié),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-12-12
Track Image Loading效果代碼分析
Track Image Loading效果代碼分析...
2007-08-08
淺談JavaScript的閉包函數(shù)
閉包是有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。首先要明白的就是，閉包是函數(shù)。由于要求它可以訪問(wèn)另一個(gè)函數(shù)的作用于中的變量，所以我們往往是在一個(gè)函數(shù)的內(nèi)部創(chuàng)建另一個(gè)函數(shù)，而“另一個(gè)函數(shù)”就是閉包。本文對(duì)其進(jìn)行系統(tǒng)分析，需要的朋友可以看下
2016-12-12
新手入門帶你學(xué)習(xí)JavaScript引擎運(yùn)行原理
這篇文章主要介紹了新手入門帶你學(xué)習(xí)JavaScript引擎運(yùn)行原理,JavaScript引擎是一個(gè)專門處理JavaScript腳本的虛擬機(jī)，一般會(huì)附帶在網(wǎng)頁(yè)瀏覽器之中。下面我們來(lái)詳細(xì)了解一下吧
2019-06-06
JS代碼實(shí)現(xiàn)table數(shù)據(jù)分頁(yè)效果
這篇文章主要介紹了JS代碼實(shí)現(xiàn)table數(shù)據(jù)分頁(yè)效果的相關(guān)資料,非常不錯(cuò)，代碼簡(jiǎn)答易懂，非常實(shí)用，需要的朋友可以參考下
2016-05-05
js定義類的方法示例【ES5與ES6】
這篇文章主要介紹了js定義類的方法,結(jié)合實(shí)例形式分析了javascript ES5與ES6標(biāo)準(zhǔn)下類的定義方法,需要的朋友可以參考下
2019-07-07
JS模擬的Map類實(shí)現(xiàn)方法
這篇文章主要介紹了JS模擬的Map類實(shí)現(xiàn)方法,可實(shí)現(xiàn)模擬java中map屬性按照鍵值對(duì)保存的功能,提供了采用數(shù)組和json兩種實(shí)現(xiàn)方式,需要的朋友可以參考下
2016-06-06