首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript跟随滚动效果插件代码（javascript Follow Plugin）
Aug 03 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
Vue 实例中使用$refs的注意事项
Jan 29 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
vue-cli3.x(1) re模块(2) 监听(2) scss(1) watch(1) TimePickerView(1) 事件调度器(1) vue-router-link(1) sched(1) 项目打包(2)
You might like
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JS获取时间的方法
2015/01/21 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
python如何重载模块实例解析
2018/01/25 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
数据库连接池的工作原理
2012/09/26 面试题
建筑施工实习自我鉴定
2013/09/19 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
模特大赛策划方案
2014/05/28 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript