zoukankan      html  css  js  c++  java
  • 动态添加select的option

     

    动态给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'来判断第二的参数或者没有对参数数组的长度做验证

  • 相关阅读:
    JavaWeb学习总结(一)——使用Session防止表单重复提交
    java_socket套接字网络编程_实现多线程聊天
    服务器响应的生成:HTTP状态代码——HttpServletResponse接口应用
    服务器响应的生成:HTTP响应报头——HttpServletResponse接口的应用
    java_socket套接字网络编程
    JavaWeb学习总结(二)——JSP中的九个内置对象
    Servlet客户请求的处理:HTTP请求报头HttpServletRequest接口应用
    文件上传利器SWFUpload使用指南
    JavaScript高级特性创建对象的九种方式
    JavaScript高级特性实现继承的七种方式
  • 原文地址:https://www.cnblogs.com/apache-x/p/5465031.html
Copyright © 2011-2022 走看看