使用js對(duì)select動(dòng)態(tài)添加和刪除OPTION示例代碼
更新時(shí)間：2013年08月12日 16:35:20 作者：
動(dòng)態(tài)刪除select中的所有options、某一項(xiàng)option以及動(dòng)態(tài)添加select中的項(xiàng)option，在IE和FireFox都能測(cè)試成功，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
<select id="ddlResourceType" onchange="getvalue(this)"> </select>
動(dòng)態(tài)刪除select中的所有options：
document.getElementById("ddlResourceType").options.length=0;
動(dòng)態(tài)刪除select中的某一項(xiàng)option：
document.getElementById("ddlResourceType").options.remove(indx);
動(dòng)態(tài)添加select中的項(xiàng)option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
上面在IE和FireFox都能測(cè)試成功，希望以后你可以用上。
其實(shí)用標(biāo)準(zhǔn)的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);//獲取文本
}
=======================================
1 檢測(cè)是否有選中
if (objSelect.selectedIndex > - 1 ) {
// 說明選中
} else {
// 說明沒有選中
}
2 刪除被選中的項(xiàng)
objSelect.options[objSelect.selectedIndex] = null ;
3 增加項(xiàng)
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );
4 修改所選擇中的項(xiàng)
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );
5 得到所選擇項(xiàng)的文本
objSelect.options[objSelect.selectedIndex].text;
6 得到所選擇項(xiàng)的值
objSelect.options[objSelect.selectedIndex].value;
=======================================
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS對(duì)select動(dòng)態(tài)添加options操作[IE和FireFox兼容]</title>
<script language="javascript" type="text/javascript">
function xlbchange(s){
switch (s){
case "1" :
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["精神提煉","作風(fēng)設(shè)計(jì)","目標(biāo)設(shè)置","理念提升"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "2" :
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3,4,5,6,7];
var soojs_text=["?；?,"校訓(xùn)","校歌","校名字體","校史展室","宣傳畫冊(cè)","宣傳光盤","辦公用品紀(jì)念品"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "3":
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["校園景觀設(shè)計(jì)","校園雕塑設(shè)計(jì)","校園浮雕設(shè)計(jì)","走廊文化設(shè)計(jì)"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "4":
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2];
var soojs_text=["學(xué)校制度","文化活動(dòng)","行為規(guī)范"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
default :
document.getElementById("lb").options.length=0;
var oOption = document.createElement("OPTION");
oOption.value=0;
oOption.text="請(qǐng)選擇作品類別";
zpmange.lb.options.add(oOption);
}
}
</script>
</head>
<body>
<form action="zpmange.asp" name="zpmange" method="post">
<p><select id="ddlResourceType" onchange="getvalue(this)"><br />
</select></p>
<p> 動(dòng)態(tài)刪除select中的所有options： <br />
document.getElementById("ddlResourceType").options.length=0; <br />
<br />
動(dòng)態(tài)刪除select中的某一項(xiàng)option： <br />
document.getElementById("ddlResourceType").options.remove(indx); </p>
<p> 動(dòng)態(tài)添加select中的項(xiàng)option: <br />
document.getElementById("ddlResourceType").options.add(new Option(text,value)); </p>
<p> 上面在IE和FireFox都能測(cè)試成功，希望以后你可以用上。 <br />
其實(shí)用標(biāo)準(zhǔn)的DOM操作也可以，就是document.createElement，appendChild，removeChild之類的。 </p>
<p>取值方面<br />
function getvalue(obj)<br />
{<br />
var m=obj.options[obj.selectedIndex].value<br />
alert(m);//獲取value<br />
var n=obj.options[obj.selectedIndex].text<br />
alert(n);//獲取文本<br />
}<br />
</p>
<p>例子：</p>
<table width="80%" border="0" align="center" cellpadding="1" cellspacing="1" style="border-style:double">
<tr>
<td width="50%" height="41" ><div align="center">
<select name="xt" id="xt" onchange="xlbchange(this.value)">
<option selected="selected">請(qǐng)選擇作品系統(tǒng)</option>
<option value="1">理念視別系統(tǒng)</option>
<option value="2">視覺識(shí)別系統(tǒng)</option>
<option value="3">環(huán)境視別系統(tǒng)</option>
<option value="4">行為視別系統(tǒng)</option>
</select>
</div></td>
<td width="61%" ><div align="center">
<select name="lb" id="lb">
<option selected="selected">請(qǐng)選擇作品類別</option>
</select>
</div></td>
</tr>
<tr>
<td height="203" colspan="2" > </td>
</tr>
</table>
</form>
</body>
</html>
動(dòng)態(tài)刪除select中的所有options：
document.getElementById("ddlResourceType").options.length=0;
動(dòng)態(tài)刪除select中的某一項(xiàng)option：
document.getElementById("ddlResourceType").options.remove(indx);
動(dòng)態(tài)添加select中的項(xiàng)option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
上面在IE和FireFox都能測(cè)試成功，希望以后你可以用上。
其實(shí)用標(biāo)準(zhǔn)的DOM操作也可以，就是document.createElement，appendChild，removeChild之類的。
取值方面
復(fù)制代碼 代碼如下:
function getvalue(obj)
{
var m=obj.options[obj.selectedIndex].value
alert(m);//獲取value
var n=obj.options[obj.selectedIndex].text
alert(n);//獲取文本
}
=======================================
1 檢測(cè)是否有選中
復(fù)制代碼 代碼如下:
if (objSelect.selectedIndex > - 1 ) {
// 說明選中
} else {
// 說明沒有選中
}
2 刪除被選中的項(xiàng)
objSelect.options[objSelect.selectedIndex] = null ;
3 增加項(xiàng)
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );
4 修改所選擇中的項(xiàng)
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );
5 得到所選擇項(xiàng)的文本
objSelect.options[objSelect.selectedIndex].text;
6 得到所選擇項(xiàng)的值
objSelect.options[objSelect.selectedIndex].value;
=======================================
復(fù)制代碼 代碼如下:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS對(duì)select動(dòng)態(tài)添加options操作[IE和FireFox兼容]</title>
<script language="javascript" type="text/javascript">
function xlbchange(s){
switch (s){
case "1" :
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["精神提煉","作風(fēng)設(shè)計(jì)","目標(biāo)設(shè)置","理念提升"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "2" :
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3,4,5,6,7];
var soojs_text=["?；?,"校訓(xùn)","校歌","校名字體","校史展室","宣傳畫冊(cè)","宣傳光盤","辦公用品紀(jì)念品"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "3":
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["校園景觀設(shè)計(jì)","校園雕塑設(shè)計(jì)","校園浮雕設(shè)計(jì)","走廊文化設(shè)計(jì)"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "4":
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2];
var soojs_text=["學(xué)校制度","文化活動(dòng)","行為規(guī)范"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
default :
document.getElementById("lb").options.length=0;
var oOption = document.createElement("OPTION");
oOption.value=0;
oOption.text="請(qǐng)選擇作品類別";
zpmange.lb.options.add(oOption);
}
}
</script>
</head>
<body>
<form action="zpmange.asp" name="zpmange" method="post">
<p><select id="ddlResourceType" onchange="getvalue(this)"><br />
</select></p>
<p> 動(dòng)態(tài)刪除select中的所有options： <br />
document.getElementById("ddlResourceType").options.length=0; <br />
<br />
動(dòng)態(tài)刪除select中的某一項(xiàng)option： <br />
document.getElementById("ddlResourceType").options.remove(indx); </p>
<p> 動(dòng)態(tài)添加select中的項(xiàng)option: <br />
document.getElementById("ddlResourceType").options.add(new Option(text,value)); </p>
<p> 上面在IE和FireFox都能測(cè)試成功，希望以后你可以用上。 <br />
其實(shí)用標(biāo)準(zhǔn)的DOM操作也可以，就是document.createElement，appendChild，removeChild之類的。 </p>
<p>取值方面<br />
function getvalue(obj)<br />
{<br />
var m=obj.options[obj.selectedIndex].value<br />
alert(m);//獲取value<br />
var n=obj.options[obj.selectedIndex].text<br />
alert(n);//獲取文本<br />
}<br />
</p>
<p>例子：</p>
<table width="80%" border="0" align="center" cellpadding="1" cellspacing="1" style="border-style:double">
<tr>
<td width="50%" height="41" ><div align="center">
<select name="xt" id="xt" onchange="xlbchange(this.value)">
<option selected="selected">請(qǐng)選擇作品系統(tǒng)</option>
<option value="1">理念視別系統(tǒng)</option>
<option value="2">視覺識(shí)別系統(tǒng)</option>
<option value="3">環(huán)境視別系統(tǒng)</option>
<option value="4">行為視別系統(tǒng)</option>
</select>
</div></td>
<td width="61%" ><div align="center">
<select name="lb" id="lb">
<option selected="selected">請(qǐng)選擇作品類別</option>
</select>
</div></td>
</tr>
<tr>
<td height="203" colspan="2" > </td>
</tr>
</table>
</form>
</body>
</html>
您可能感興趣的文章:
- jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法
- 利用js給datalist或select動(dòng)態(tài)添加option選項(xiàng)的方法
- jQuery動(dòng)態(tài)產(chǎn)生select option下拉列表
- JQuery動(dòng)態(tài)添加Select的Option元素實(shí)現(xiàn)方法
- JS 通過系統(tǒng)時(shí)間限定動(dòng)態(tài)添加 select option的實(shí)例代碼
- JS & JQuery 動(dòng)態(tài)添加 select option
- js動(dòng)態(tài)改變select選擇變更option的index值示例
- 動(dòng)態(tài)添加option及createElement使用示例
- jquery動(dòng)態(tài)添加option示例
- JS動(dòng)態(tài)添加與刪除select中的Option對(duì)象(示例代碼)
- JS動(dòng)態(tài)添加option和刪除option(附實(shí)例代碼)
- javascript 動(dòng)態(tài)設(shè)置已知select的option的value值的代碼
- javascript 動(dòng)態(tài)創(chuàng)建 Option選項(xiàng)
- js或jquery動(dòng)態(tài)輸出select option的實(shí)現(xiàn)代碼
相關(guān)文章
基于js?+?html2canvas實(shí)現(xiàn)網(wǎng)頁放大鏡功能
最近接到任務(wù),需實(shí)現(xiàn)【網(wǎng)頁】放大鏡的效果,百度搜索?【js?放大鏡】關(guān)鍵字,千篇一律的都是一些仿淘寶/京東等電商網(wǎng)站中查看規(guī)格大圖的效果實(shí)現(xiàn),根本無法滿足我的需求,于是自己花了點(diǎn)時(shí)間調(diào)研實(shí)現(xiàn),在這里分享給大家,感興趣的朋友可以參考下2023-12-12
javascript網(wǎng)頁隨機(jī)點(diǎn)名實(shí)現(xiàn)過程解析
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁隨機(jī)變色及實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
this指觸發(fā)事件的對(duì)象，接下來為大家分享下javascript中onclick(this)的用法，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
JavaScript字符串轉(zhuǎn)數(shù)字的簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于JavaScript字符串轉(zhuǎn)數(shù)字的簡(jiǎn)單實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
js實(shí)現(xiàn)時(shí)間顯示幾天前、幾小時(shí)前或者幾分鐘前的方法集錦
這篇文章主要介紹了js實(shí)現(xiàn)時(shí)間顯示幾天前、幾小時(shí)前或者幾分鐘前的方法,實(shí)例匯總分析了時(shí)間顯示格式轉(zhuǎn)換的常用思路與技巧,需要的朋友可以參考下2015-05-05
微信小程序彈窗禁止頁面滾動(dòng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序彈窗禁止頁面滾動(dòng)的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
JavaScript表單焦點(diǎn)自動(dòng)切換代碼
這篇文章主要介紹了JavaScript表單焦點(diǎn)自動(dòng)切換代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
動(dòng)態(tài)加載css方法實(shí)現(xiàn)和深入解析
本文主要介紹了動(dòng)態(tài)加載css的方法實(shí)現(xiàn)和深入解析。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
詳解關(guān)于JSON.parse()和JSON.stringify()的性能小測(cè)試
這篇文章主要介紹了詳解關(guān)于JSON.parse()和JSON.stringify()的性能小測(cè)試，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了詳解Next.js頁面渲染的優(yōu)化方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01