使用js对select动态添加和删除OPTION示例代码
更新时间：2013年08月12日 16:35:20 作者：
动态删除select中的所有options、某一项option以及动态添加select中的项option，在IE和FireFox都能测试成功，感兴趣的朋友可以参考下，希望对大家有所帮助
<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>
动态删除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>
您可能感兴趣的文章:
- JavaScript操作select元素和option的实例代码
- javascript操作select元素实例分析
- 获取select元素被选中的文本内容的js代码
- js querySelector和getElementById通过id获取元素的区别
- js获取当前select 元素值的代码
- js 获取当前select元素值的代码
- JavaScript Select和Option列表元素上下左右移动
- extjs 列表框(multiselect)的动态添加列表项的方法
- JS对HTML标签select的获取、添加、删除操作
- JavaScript实现将数组数据添加到Select下拉框的方法
- JS动态添加与删除select中的Option对象(示例代码)
- JS & JQuery 动态添加 select option
- JavaScript实现向select下拉框中添加和删除元素的方法
相关文章
本篇文章主要介绍了详解为Bootstrap Modal添加拖拽的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家介绍了JS前端认证授权技巧归纳总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要给大家介绍了光宇微信小程序单页面应用路由的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
在JavaScript中进行错误处理,最常见的方式就是使用try catch语句,下面这篇文章主要给大家介绍了关于JavaScript错误处理的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
这篇文章主要介绍了JavaScript封装的常用工具类库bee.js用法,结合实例形式详细分析了经典类库bee.js常见的手机、身份证、邮箱校验,以及字符串操作、四则运算、正则验证等相关操作的封装与使用技巧,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了JS实现鼠标滑过链接改变网页背景颜色的方法,涉及js响应鼠标事件动态修改页面元素属性的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
用js写一段小程序，但是又觉得使用浏览器去运行挺麻烦的，下面为大家介绍下如何使用java程序调用javascript程序，有类似需求的朋友可以参考下哈，希望对大家有所帮助2013-07-07
Ajax异步提交表单数据的说明及方法实例，需要的朋友可以参考一下2013-06-06
用js实现的对css的一些操作方法，集合，方便需要用js控制css的朋友2008-10-10
这篇文章主要介绍了javascript实现鼠标拖动改变层大小的方法,涉及javascript操作鼠标事件及样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
最新评论