DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 使用js對select動態添加和刪除OPTION示例代碼
使用js對select動態添加和刪除OPTION示例代碼
編輯:關於JavaScript     
<select id="ddlResourceType" onchange="getvalue(this)"> </select>
動態刪除select中的所有options:
document.getElementById("ddlResourceType").options.length=0;
動態刪除select中的某一項option:
document.getElementById("ddlResourceType").options.remove(indx);
動態添加select中的項option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
上面在IE和FireFox都能測試成功,希望以後你可以用上。
其實用標准的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 檢測是否有選中
復制代碼 代碼如下:
if (objSelect.selectedIndex > - 1 ) {
// 說明選中
} else {
// 說明沒有選中
}

2 刪除被選中的項
objSelect.options[objSelect.selectedIndex] = null ;
3 增加項
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );
4 修改所選擇中的項
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );
5 得到所選擇項的文本
objSelect.options[objSelect.selectedIndex].text;
6 得到所選擇項的值
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對select動態添加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=["精神提煉","作風設計","目標設置","理念提升"];
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=["校徽","校訓","校歌","校名字體","校史展室","宣傳畫冊","宣傳光盤","辦公用品紀念品"];
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=["校園景觀設計","校園雕塑設計","校園浮雕設計","走廊文化設計"];
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=["學校制度","文化活動","行為規范"];
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="請選擇作品類別";
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> 動態刪除select中的所有options: <br />
document.getElementById("ddlResourceType").options.length=0; <br />
<br />
動態刪除select中的某一項option: <br />
document.getElementById("ddlResourceType").options.remove(indx); </p>
<p> 動態添加select中的項option: <br />
document.getElementById("ddlResourceType").options.add(new Option(text,value)); </p>
<p> 上面在IE和FireFox都能測試成功,希望以後你可以用上。 <br />
其實用標准的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">請選擇作品系統</option>
<option value="1">理念視別系統</option>
<option value="2">視覺識別系統</option>
<option value="3">環境視別系統</option>
<option value="4">行為視別系統</option>
</select>
</div></td>
<td width="61%" ><div align="center">
<select name="lb" id="lb">
<option selected="selected">請選擇作品類別</option>
</select>
</div></td>
</tr>
<tr>
<td height="203" colspan="2" > </td>
</tr>
</table>
</form>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved