使用js对select动态添加和删除OPTION示例代码


Posted in Javascript onAugust 12, 2013

<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>
Javascript 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
判断ie的两种简单方法
Aug 12 #Javascript
js中数组Array的一些常用方法总结
Aug 12 #Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 #Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 #Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 #Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 #Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 #Javascript
You might like
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
js 目录列举函数
2008/11/06 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
实例浅析js的this
2016/12/11 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python tkinter组件摆放方式详解
2019/09/16 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
售后主管岗位职责
2013/12/08 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
销售团队激励口号
2014/06/06 职场文书
高效课堂标语
2014/06/26 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server