JS对select动态添加options操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑:
有如下的下拉框:
<select id="ddlResourceType" onchange="getvalue(this)">
</select>
1、动态删除select中的所有options:
document.getElementById("ddlResourceType").options.length=0;
2、动态删除select中的某一项option:
document.getElementById("ddlResourceType").options.remove(index);
3、动态添加select中的项option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
上面的操作在IE和火狐中都能测试成功,其实用标准的DOM操作也可以,就是document.createElement,appendChild,removeChild之类的。
4、下面要说下在取值方面,自己遇到的一个坑,很隐藏的坑,大家都知道,如何获取选中的某一项option的值,当初在用chrome调试的时候,打印出了原生select对象,找到了selectedOptions这个选中项的数组属性,正常情况下,单选下拉框的该属性只有一个值,默认可以使用selectedOptions[0]这样的方式去获取,是的,我当时就是这样去弄的,结果项目上线后大概将近半个月的时候,运营那边报告说,客户在IE浏览器下,下拉框没有数据显示,我当时就想,下拉框动态获取的数据肯定是取数据的时候,出现错误了,然后逐一去排查,发现报错的原因是ie下面select原生对象里,是没有selectedOptions这样的属性的,那么只能另辟蹊径来解决了,我仔细找了下剩余的一些属性,发现 找到了 selctedIndex这样的一个好属性,一看字面意思就明白了,就是选中项的index值啊,这就好办了啊,直接用options[selectedIndex]去访问不就好了么,到此,问题顺利解决:
取值的时候,应该这样做,才能保证兼容性:
function getvalue(obj)
{
var m=obj.options[obj.selectedIndex].value
alert(m);//获取value
var n=obj.options[obj.selectedIndex].text
alert(n);//获取文本
}
5、 检测是否有选中
if (objSelect.selectedIndex > - 1 ) {
// 说明选中
} else {
// 说明没有选中
}
6、删除被选中的项
objSelect.options[objSelect.selectedIndex] = null ;
7、增加项
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );
8、修改所选择中的项
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );
9、得到所选择项的文本
objSelect.options[objSelect.selectedIndex].text;
10、得到所选择项的值
objSelect.options[objSelect.selectedIndex].value;
纸上得来终觉浅,绝知此事要躬行。必须要去尝试,在实践中,才能获得解决问题的最有效的途径,这也是让记忆深刻的唯一方式,共勉。
JS对select动态添加options操作(主流浏览器兼容)的更多相关文章
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加option操作 (三级联动) (搜索拼接)
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- 使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- js实现select动态添加option
关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...
- Jquery+Ajax实现Select动态添加数据
https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...
- select 动态添加option函数
转自:https://lym6520.iteye.com/blog/309937 经常会用到select动态添加元素,写了个方法,方便调用! ... /** * 功能:select对象动态添加Opt ...
- [JavaScript]JS对select动态options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"></select> ...
随机推荐
- 夏令营提高班上午上机测试 Day 1 解题报告
Day 1的题难度上来说不算太高,但是T2和T3还是有一定的思维量的. 一个比较好的开始.虽然AK的人只有几个.. (懒得去翻result了..忘了当时拿了多少分了 (哦,前两天我们机房是没有成绩的, ...
- BZOJ 4767: 两双手 [DP 组合数]
传送门 题意: 给你平面上两个向量,走到指定点,一些点不能经过,求方案数 煞笔提一开始被题面带偏了一直郁闷为什么方案不是无限 现在精简的题意.....不就是$bzoj3782$原题嘛,还不需要$Luc ...
- Java获得系统的外网IP
关于如何获得系统外网IP?在网上找了好久,大多数解决方案都没法直接用,所以今天和大家分享一段获得外网IP的代码! import java.net.Inet4Address; import java.n ...
- vue端口号被占用如何解决
vue端口占用问题 1. vue init webpack-simple#1.0 vue-webpack-simple-demo 2. cd vue-webpack-simple-demo 3. cn ...
- DaemonSet 典型应用场景 - 每天5分钟玩转 Docker 容器技术(129)
Deployment 部署的副本 Pod 会分布在各个 Node 上,每个 Node 都可能运行好几个副本.DaemonSet 的不同之处在于:每个 Node 上最多只能运行一个副本. DaemonS ...
- Trie树/字典树题目(2017今日头条笔试题:异或)
/* 本程序说明: [编程题] 异或 时间限制:1秒 空间限制:32768K 给定整数m以及n个数字A1,A2,..An,将数列A中所有元素两两异或,共能得到n(n-1)/2个结果,请求出这些结果中大 ...
- solr-搭建与使用过程中问题总结-链接
以下错误可以确定在CDH版本Hbase集群+Lily hbase indexer+solrCloud的环境中可以解决,有开源版本解决成功案例的请在下方评论. 1.If you see this err ...
- Gentoo(贱兔)Linux安装笔记
网上对于Gentoo Linux 的教程少之又少,所以这里我将自己的安装记录贴出来 希望对正在研究Gentoo 的小伙伴们有帮助! 1.确认连接到互联网,使用net-setup工具配置网络 roo ...
- bzoj1555 KD之死 贪心+堆优化
1555: KD之死 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 124 Solved: 54[Submit][Status][Discuss] D ...
- SpringMvc文件资源防止被外链链接
/** * 文件下载防止文件被别的网站引用 * 直接访问会访问不了 * @Description: * @param type * 文件后缀名 * @param fileName * 文件名 * @p ...