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

