使用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 相关文章推荐
javascript 伪数组实现方法
Oct 11 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
动态加载js文件简单示例
Apr 21 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
vue实现简单学生信息管理
May 30 Javascript
判断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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
PHP 函数学习简单小结
2010/07/08 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
js实现进度条的方法
2015/02/13 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
简单实现js上传文件功能
2017/08/21 Javascript
webpack多页面开发实践
2017/12/18 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
物业客服专员岗位职责
2013/11/30 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书