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 6 Part 2.
Day 6的第二部分,数论 数论是纯粹数学的分支之一,主要研究整数的性质 1.一些符号: a mod b 代表a除以b得到的余数 a|b a是b的约数 floor(x) 代表x的下取整,即小于等于 ...
- AGC017 F - Zigzag
传送门 Time limit : 4sec / Memory limit : 256MB Score : 1600 points Problem Statement There are N(N+1)⁄ ...
- Scrapy框架实战-妹子图爬虫
Scrapy这个成熟的爬虫框架,用起来之后发现并没有想象中的那么难.即便是在一些小型的项目上,用scrapy甚至比用requests.urllib.urllib2更方便,简单,效率也更高.废话不多说, ...
- flex 布局 input 宽度不自适应
flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!
- 保存文件名至txt文件中,不含后缀
准备深度学习的训练数据时,可能会用到将图片文件名保存到txt文件中,所以用python实现了该功能.输入参数只设了两个,图片存放路径,和输出的txt文件名. 代码里写死了只识别.jpg格式,并不进行目 ...
- Nginx Rewrite规则详解
Rewrite规则含义就是某个URL重写成特定的URL,从某种意义上说为了美观或者对搜索引擎友好,提高收录量及排名等. Rewrite规则的最后一项参数为flag标记,支持的flag标记主要有以下几种 ...
- Halcon一日一练:图像拼接技术
图像拼接技术就是针对同一场景的一系列图片,根据图片的特征,比如位置,重叠部分等,拼接成一张大幅的宽视角的图像. 图像拼接要求拼接后图像最大程度的与原图一致,失真尽可能的小,并且要尽量做到天衣无缝即没有 ...
- linux下卸载已安装的软件
1.先查询该软件是否安装,是否存在 rpm -qa | grep -i teamview 2.根据一中的结果(软件包名称),执行如下命令 rpm -e [软件包名]
- [翻译]编写高性能 .NET 代码 第二章:垃圾回收
返回目录 第二章:垃圾回收 垃圾回收是你开发工作中要了解的最重要的事情.它是造成性能问题里最显著的原因,但只要你保持持续的关注(代码审查,监控数据)就可以很快修复这些问题.我这里说的"显著的 ...
- Linux系统上安装JDK1.8
1,下载jdk1.8 首先进入jdk下载目录:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213315 ...