使用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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
package.json文件配置详解
Jun 15 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php自定义hash函数实例
2015/05/05 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
javascript中new关键字详解
2015/12/14 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
Python实现批量下载文件
2015/05/17 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
阿拉伯书店:Jamalon
2019/07/24 全球购物
11月红领巾广播稿
2014/01/17 职场文书
家长寄语大全
2014/04/02 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
法人委托书范本格式
2014/09/15 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书