之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑:

有如下的下拉框:

<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操作(主流浏览器兼容)的更多相关文章

  1. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  2. JS对select动态添加option操作 (三级联动) (搜索拼接)

    以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...

  3. js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

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

    动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助   <s ...

  5. 使用js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  6. js实现select动态添加option

    关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...

  7. Jquery+Ajax实现Select动态添加数据

    https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...

  8. select 动态添加option函数

    转自:https://lym6520.iteye.com/blog/309937 经常会用到select动态添加元素,写了个方法,方便调用!  ... /** * 功能:select对象动态添加Opt ...

  9. [JavaScript]JS对select动态options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"></select>     ...

随机推荐

  1. 夏令营讲课内容整理 Day 6 Part 2.

    Day 6的第二部分,数论 数论是纯粹数学的分支之一,主要研究整数的性质   1.一些符号: a mod b 代表a除以b得到的余数 a|b a是b的约数 floor(x) 代表x的下取整,即小于等于 ...

  2. AGC017 F - Zigzag

    传送门 Time limit : 4sec / Memory limit : 256MB Score : 1600 points Problem Statement There are N(N+1)⁄ ...

  3. Scrapy框架实战-妹子图爬虫

    Scrapy这个成熟的爬虫框架,用起来之后发现并没有想象中的那么难.即便是在一些小型的项目上,用scrapy甚至比用requests.urllib.urllib2更方便,简单,效率也更高.废话不多说, ...

  4. flex 布局 input 宽度不自适应

    flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!

  5. 保存文件名至txt文件中,不含后缀

    准备深度学习的训练数据时,可能会用到将图片文件名保存到txt文件中,所以用python实现了该功能.输入参数只设了两个,图片存放路径,和输出的txt文件名. 代码里写死了只识别.jpg格式,并不进行目 ...

  6. Nginx Rewrite规则详解

    Rewrite规则含义就是某个URL重写成特定的URL,从某种意义上说为了美观或者对搜索引擎友好,提高收录量及排名等. Rewrite规则的最后一项参数为flag标记,支持的flag标记主要有以下几种 ...

  7. Halcon一日一练:图像拼接技术

    图像拼接技术就是针对同一场景的一系列图片,根据图片的特征,比如位置,重叠部分等,拼接成一张大幅的宽视角的图像. 图像拼接要求拼接后图像最大程度的与原图一致,失真尽可能的小,并且要尽量做到天衣无缝即没有 ...

  8. linux下卸载已安装的软件

    1.先查询该软件是否安装,是否存在 rpm -qa | grep -i teamview 2.根据一中的结果(软件包名称),执行如下命令 rpm -e [软件包名]

  9. [翻译]编写高性能 .NET 代码 第二章:垃圾回收

    返回目录 第二章:垃圾回收 垃圾回收是你开发工作中要了解的最重要的事情.它是造成性能问题里最显著的原因,但只要你保持持续的关注(代码审查,监控数据)就可以很快修复这些问题.我这里说的"显著的 ...

  10. Linux系统上安装JDK1.8

    1,下载jdk1.8 首先进入jdk下载目录:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213315 ...