JS對(duì)select控件option選項(xiàng)的增刪改查示例代碼
更新時(shí)間：2013年10月21日 16:23:30 作者：
Javascript操作select是表單中比較常見的，大家可以在網(wǎng)上搜索到很多的相關(guān)資料，接下來為大家詳細(xì)介紹下，JS動(dòng)態(tài)操作select中的各種方法，感興趣的朋友可以參考下
Javascript 操作select是表單中常見的一種,下面介紹幾種常用的JS動(dòng)態(tài)操作select中的各種方法：
//動(dòng)態(tài)創(chuàng)建select
function createSelect()
{
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
//添加選項(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
}
//刪除所有選項(xiàng)option
function removeAll()
{
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
//刪除一個(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);
}
//獲得選項(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;
//修改選項(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("新文本","新值");
復(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("新文本","新值");
您可能感興趣的文章:
- js 如何實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的增刪改查
- javascript操作xml(增刪改查)例子代碼hta版
- javascript Xml增刪改查(IE下)操作實(shí)現(xiàn)代碼
- JavaScript針對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查用法實(shí)例
- node.js操作mysql(增刪改查)
- AngularJS中如何使用$http對(duì)MongoLab數(shù)據(jù)表進(jìn)行增刪改查
- Node.js操作mysql數(shù)據(jù)庫(kù)增刪改查
- javascript實(shí)現(xiàn)信息增刪改查的方法
- javascript js 操作數(shù)組 增刪改查的簡(jiǎn)單實(shí)現(xiàn)
- JS結(jié)合bootstrap實(shí)現(xiàn)基本的增刪改查功能
相關(guān)文章
這篇文章主要介紹了js在IE與FF之間的區(qū)別。需要的朋友可以過來參考下，希望對(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效果代碼分析...2007-08-08
閉包是有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。首先要明白的就是，閉包是函數(shù)。由于要求它可以訪問另一個(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è)瀏覽器之中。下面我們來詳細(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定義類的方法,結(jié)合實(shí)例形式分析了javascript ES5與ES6標(biāo)準(zhǔn)下類的定義方法,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JS模擬的Map類實(shí)現(xiàn)方法,可實(shí)現(xiàn)模擬java中map屬性按照鍵值對(duì)保存的功能,提供了采用數(shù)組和json兩種實(shí)現(xiàn)方式,需要的朋友可以參考下2016-06-06