AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2017-12-04 1410
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
应用型负载均衡 ALB，每月750个小时 15LCU
网络型负载均衡 NLB，每月750个小时 15LCU
简介：
动态删除select中的所有options、某一项option以及动态添加select中的项option，在IE和FireFox都能测试成功，感兴趣的朋友可以参考下，希望对大家有所帮助
 
<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示例代码，如需转载请自行联系原博主。
文章标签：
负载均衡
Web App开发
JavaScript
关键词：
JavaScript select
JavaScript动态添加
JavaScript option
JavaScript动态添加option
JavaScript select option
相关实践学习
SLB负载均衡实践
本场景通过使用阿里云负载均衡 SLB 以及对负载均衡 SLB 后端服务器 ECS 的权重进行修改，快速解决服务器响应速度慢的问题
负载均衡入门与产品使用指南
负载均衡（Server Load Balancer）是对多台云服务器进行流量分发的负载均衡服务，可以通过流量分发扩展应用系统对外的服务能力，通过消除单点故障提升应用系统的可用性。 本课程主要介绍负载均衡的相关技术以及阿里云负载均衡产品的使用方法。
云栖希望。
目录
相关文章
破浪前进
|
7月前
|
存储 开发框架 JavaScript
uniapp、vue、小程序、js图片转base64 示例代码
uniapp、vue、小程序、js图片转base64 示例代码
破浪前进
496 0
终究是雾散
|
JavaScript 前端开发
javascript动态添加删除表格
javascript动态添加删除表格
终究是雾散
65 0
sumith
|
6月前
|
JavaScript 前端开发 API
探讨JavaScript动态添加HTML文件的技术
探讨JavaScript动态添加HTML文件的技术
sumith
72 1
茶卡盐佑星_
|
6月前
|
JavaScript 前端开发
JS实现select框实现模糊搜索
JS实现select框实现模糊搜索
茶卡盐佑星_
128 3
码喽的自我修养
|
6月前
|
JavaScript 索引
JS数组常用方法总结，含ES6新方法，附示例代码
JS数组常用方法总结，含ES6新方法，附示例代码
码喽的自我修养
40 0
sumith
|
6月前
|
JavaScript 前端开发 索引
探讨JavaScript中获取<select>元素选中情况的技术
探讨JavaScript中获取<select>元素选中情况的技术
sumith
214 0
多加点香菜85
|
7月前
|
开发框架 JavaScript 小程序
uniapp、vue、小程序、js图片转base64 示例代码
uniapp、vue、小程序、js图片转base64 示例代码
多加点香菜85
419 1
Heartprotection
|
JavaScript 前端开发
js二级select框
js二级select框
Heartprotection
75 0
讓丄帝愛伱
|
JavaScript
JS设置select下拉框默认选中
JS设置select下拉框默认选中
讓丄帝愛伱
126 0
兜里只有三分钱~
|
JavaScript
js根据内容让select默认选中
js根据内容让select默认选中
兜里只有三分钱~
52 0

热门文章

最新文章

  • 1
    【转】Javascript关键字和保留字
  • 2
    OC与JS互相调用
  • 3
    JavaScript 操作 Cookie
  • 4
    Node.js 中流操作实践
  • 5
    05.javascript访问CSS
  • 6
    javascript工厂模式和构造方法
  • 7
    如何让你的JavaScript代码更加语义化
  • 8
    js数组遍历some,foreach,map,filter,every对比
  • 9
    第14章 使用Kotlin开发JavaScript代码 《Kotin 编程思想·实战》
  • 10
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 1
    深入理解JavaScript中的事件循环机制
    85
  • 2
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    110
  • 3
    JavaScript 数组方法概览
    37
  • 4
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    61
  • 5
    JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
    46
  • 6
    JavaScript 提供了多种方法来操作 DOM（文档对象模型）
    47
  • 7
    JavaScript的垃圾回收机制通过标记-清除算法自动管理内存
    57
  • 8
    JavaScript 的垃圾回收机制有一些潜在的缺点
    41
  • 9
    nbcio-vue下载安装后运行报错，diagram-js没有安装
    59
  • 10
    了解JavaScript的垃圾回收机制
    39

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Node.js 入门教程文档
  • Node.js 入门与实战

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月