JS操作select下拉框動態(tài)變動(創(chuàng)建/刪除/獲取)
更新時間：2013年06月02日 15:04:12 作者：
動態(tài)創(chuàng)建及刪除select、添加及刪除選項option、獲得選項option的值、獲得選項option的文本等等，感興趣的朋友可以參考下哈
1.動態(tài)創(chuàng)建select
function createSelect(){
var mySelect = document.createElement_x("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
2.添加選項option
function addOption(){
//根據(jù)id查找對象，
var obj=document.getElementByIdx_x('mySelect');
//添加一個選項
obj.add(new Option("文本","值"));
}
3.刪除所有選項option
function removeAll(){
var obj=document.getElementByIdx_x('mySelect');
obj.options.length=0;
}
4.刪除一個選項option
function removeOne(){
var obj=document.getElementByIdx_x('mySelect');
//index,要刪除選項的序號，這里取當(dāng)前選中選項的序號
var index=obj.selectedIndex;
obj.options.remove(index);
}
5.獲得選項option的值
var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序號，取當(dāng)前選中選項的序號
var val = obj.options[index].value;
6.獲得選項option的文本
var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序號，取當(dāng)前選中選項的序號
var val = obj.options[index].text;
7.修改選項option
var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序號，取當(dāng)前選中選項的序號
var val = obj.options[index]=new Option("新文本","新值");
8.刪除select
function removeSelect(){
var mySelect = document.getElementByIdx_x("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
復(fù)制代碼 代碼如下:
function createSelect(){
var mySelect = document.createElement_x("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
2.添加選項option
復(fù)制代碼 代碼如下:
function addOption(){
//根據(jù)id查找對象，
var obj=document.getElementByIdx_x('mySelect');
//添加一個選項
obj.add(new Option("文本","值"));
}
3.刪除所有選項option
復(fù)制代碼 代碼如下:
function removeAll(){
var obj=document.getElementByIdx_x('mySelect');
obj.options.length=0;
}
4.刪除一個選項option
復(fù)制代碼 代碼如下:
function removeOne(){
var obj=document.getElementByIdx_x('mySelect');
//index,要刪除選項的序號，這里取當(dāng)前選中選項的序號
var index=obj.selectedIndex;
obj.options.remove(index);
}
5.獲得選項option的值
復(fù)制代碼 代碼如下:
var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序號，取當(dāng)前選中選項的序號
var val = obj.options[index].value;
6.獲得選項option的文本
復(fù)制代碼 代碼如下:
var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序號，取當(dāng)前選中選項的序號
var val = obj.options[index].text;
7.修改選項option
復(fù)制代碼 代碼如下:
var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序號，取當(dāng)前選中選項的序號
var val = obj.options[index]=new Option("新文本","新值");
8.刪除select
復(fù)制代碼 代碼如下:
function removeSelect(){
var mySelect = document.getElementByIdx_x("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
相關(guān)文章
使用weixin-java-miniapp配置進(jìn)行單個小程序的配置詳解
這篇文章主要介紹了使用weixin-java-miniapp配置進(jìn)行單個小程序的配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
JS及JQuery對Html內(nèi)容編碼,Html轉(zhuǎn)義
本文主要介紹了JS及JQuery對Html內(nèi)容編碼,Html轉(zhuǎn)義的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章給大家羅列了在前段排序中會遇到的問題并寫了解決方案，非常詳細(xì)，有需要的朋友可以參考。2016-07-07
這篇文章主要介紹了微信公眾號服務(wù)器驗證Token步驟圖解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
bootstrap confirmation按鈕提示組件使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap confirmation按鈕提示組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
JS hasOwnProperty()方法檢測一個屬性是否是對象的自有屬性的方法
這篇文章主要介紹了JS hasOwnProperty()方法檢測一個屬性是否是對象的自有屬性的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
javascript之循環(huán)停頓上下滾動...2007-08-08
TypeScript創(chuàng)建一個簡單Web應(yīng)用
這篇文章主要為大家介紹了TypeScript創(chuàng)建一個簡單Web應(yīng)用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
使用JavaScript動態(tài)設(shè)置樣式實現(xiàn)代碼(2)
使用onmouseover和onmouseout事件實現(xiàn)不同的效果而且是使用js動態(tài)實現(xiàn)，本文有利于鞏固你js與css方面的知識，感興趣的你可以了解下哦，希望本文對你有所幫助2013-01-01
css實現(xiàn)的圖片模糊效果...2007-04-04