动态添加select的option
首先是定义的select元素:
//根据ID获得select元素
var mySelect = document.getElementByIdx_x("mySelect");
方法一:
通过new Option(value,text)函数,第一个参数是显示的文字,第二个参数是value值,如果需要添加其他属性,可以这样:
var opp = new Option("aaa","001");
opp.name = "option1";
//将option添加到select标签里面
mySelect.add(opp);
//添加完成
方法二:
通过document.createElement_x()来创建选项,然后再设置选项的属性。在这里w3c标准是可以设置option的label属性即为显示文本,但事实证明FF并不支持,只是给option增加了一个label属性。而w3c中定义的readonly的属性text,在FF中却可以设置。那么是否需要判断浏览器类型呢?当然不用,该方案代码如下
var option = document.createElement_x('option');
try{
// 二级DOM中该属性为readonly,但FF确可写,且可显示为选项内容
option.text = “aaa”;
}catch(e){
// IE支持label,可以直接显示为选项的文字
option.label = "aaa";
}
option.value = "001";
// 如果不传第二个参数,FF下会报错
mySelect.add(option, null);
这里要注意的add()函数的第二个参数,该参数为before,可以指定选项插到哪个选项之前,如果为null则插到最后。如果不指定这个参数在IE系不会有问题,FF下会报错,提示Not enough arguments,参数不足,所以最好传个null先。
方法三:
比较少用于select元素上,IE下是无效的,但是动态添加其他元素的孩子时经常用到。当然也可以设置元素属性后appendChild(),同方案二。这里要先把select隐藏掉,这样可以减少浏览器重绘次数,对于display='none'的元素的操作不会引起重绘或回流。再改变完之后再显示出来:
//首先设置select元素不可见
mySelect.style.display = 'none';
//给select元素添加option选项
mySelect.innerHTML += '
';
//最后将select元素设置可见
mySelect.style.display = 'block';
OK!!!
这三种方式最常用的就是第一种了,没有兼容性问题,其他两种只是在此作为例子,展示创建option的方法。
动态删除select中的所有options:
document.getElementByIdx_x("ddlResourceType").options.length=0;
动态删除select中的某一项option:
document.getElementByIdx_x("ddlResourceType").options.remove(indx);
动态添加select中的项option:
document.getElementByIdx_x("ddlResourceType").options.add(new Option(text,value));
兼容IE和FF的Javascript动态添加Select控件的Option选项
看了很多Javascript的书籍,发现对Select可以使用add方法添加Option选项。
selectObj.add(new Option("Label", "Value"));
但是add方法好像只在IE下好用。现在提供一个通用的方法:
selectObj.options[selectObj.length] = new Option("Label", "Value");
另外如果想还想使用add方法,可以写成如下格式:
selectObj.add(new Option("Label", "Value"), null);
请注意,在IE6及IE7下请使用不带null参数的add方法,在FF下请使用带null参数的方法,IE8下带不带都可以。
很奇怪为什么一定要加null,我猜测add方法里一定使用了'=== null'来判断第二的参数或者没有对参数数组的长度做验证
动态添加select的option的更多相关文章
- 动态添加select的option [转载]
动态给select标签添加option,结合前人经验以及自己经验,现在总结三种方法供大家参考,一起交流学习!首先是定义的select元素://根据ID获得select元素 var mySelect = ...
- 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 在IE和火狐firfox 里动态增加select 的option
使用js 在IE和火狐firfox 里动态增加select 的option <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition ...
- JS & JQuery 动态添加 select option
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...
- javascript;select动态添加和删除option
<select id="sltCity"></select> //添加Option. var optionObj = new Option(text, va ...
- 动态添加select选项空选项问题
问题:动态添加校区选项的数据的时候,总是多添加一项空白的数据. 动态添加代码如下: 网上找到的原因:因为在option中有标签没有闭合,所以导致浏览器认为是两个option, 所以只需要给这个标签添加 ...
- jQuery为div添加select和option
简单描述:用jQuery给页面添加select下拉框,直接上图 总结:清楚明了^_^
随机推荐
- win7不休眠方式设置
方式1:命令行下以管理员方式执行:powercfg -h off 方式2:右键个性化-->屏幕保护程序-->更改电源设置--->更改计算机睡眠时间--->是计算机进入睡眠状态选 ...
- C#制作ActiveX控件中调用海康SDK的问题
事情是这样的,有一台海康威视的摄像头,客户需要一个ActiveX控件嵌入到网页中,通过点击按钮开始录制和结束录制来进行视频的录制和保存,关于海康摄像头的二次开发在此就不多说了,可以参考SDK中的说明. ...
- 2.JAVA编程思想——一切都是对象
一切都是对象 欢迎转载.转载请标明出处:http://blog.csdn.net/notbaron/article/details/51040221 虽然以C++为基础,但 Java 是一种更纯粹的面 ...
- IDEA下配置Spring Boot的热部署
© 版权声明:本文为博主原创文章,转载请注明出处 devtools简介 spring-boot-devtools会监听classpath下的文件变动,并且会立即重启应用(发生在保存时机),因为其采用的 ...
- LINUX find 实用
查找文件find ./ -type f 查找目录find ./ -type d 查找名字为test的文件或目录find ./ -name test 查找名字符合正则表达式的文件,注意前面的‘.*’(查 ...
- UVA 11354 - Bond (最小生成树 + 树链剖分)
题目链接~~> 做题感悟:这题開始看到时感觉不是树不优点理,一想能够用 Kruskal 处理成树 ,然后就好攻克了. 解题思路: 先用 Kruskal 处理出最小生成树.然后用树链剖分 + 线段 ...
- Junit内部解密之四: Junit单元测试最佳实践
我们做使用Junit工具来做单页测试或接口测试时,需要注意一些问题,包括我们的编码规范,test规范,以及编写测试代码的策略,以下个人的总结. 1.为还没有实现的测试代码抛出一个异常.这就避免了该测试 ...
- Selenium 应用 WebDriverWait 和 expected_conditions(待验证)
收藏在我的收藏看不到,只能copy了,转载至http://www.cnblogs.com/yicaifeitian/p/4749149.html 哈哈,我始终相信贴出来总会有人看.WebDriverW ...
- TSharding源码阅读-MapperShardingInitializer
/** * 增强Mapper处理总入口:Mapper被mybatis初始化后,在这里做进一步的处理和增强 * * @author qigong on 5/1/15 */ public class Ma ...
- 如何在iOS中使用libxml
本文转载至 http://blog.csdn.net/cloudhsu/article/details/8087628 1. 选择xcode工程设定 2. 选择target 3. 选择Summary ...