使用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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
Position属性之relative用法
Dec 14 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
layui复选框限制选择个数的方法
Sep 18 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
js随机生成一个验证码
2017/06/01 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python实现多线程抓取妹子图
2015/08/08 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
新年主持词
2014/03/27 职场文书
爱之链教学反思
2014/04/30 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
免职证明样本
2014/10/23 职场文书
个人自荐书怎么写
2015/03/26 职场文书
2015年教研工作总结
2015/05/23 职场文书