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

     

    关于 select 的添加 option 应该注意的问题。 
    标准的做法如上
    也就是说,标准的做法是 s.options.add();
    但是如果你一定要用 s.appendChild(option);
    注意了,你只能用如下两种方式之一:
    1.  
         s.appendChild(option);
         option.text = 'hello world';
         option.value =3;
       也就是,一定要先添加到 select 中,然后再为 option 赋值。否则在 FF 下是显示正常的,但是在 IE6 中显示的是空白
     
    2. 如果你要讲 option.text 和 option.value 的赋值放在前面,那么请用 option.innerHTML 而不是 option.text
      如下: 
        option.innerHTML = 'hello world';
        opion.value = 3;
        option.appendChild(option);
    3 第三种解决方式。
    var op=document.createElement("option");      // 新建OPTION (op) 
    op.setAttribute("value",0);          // 设置OPTION的 VALUE 
    op.appendChild(document.createTextNode("请选择---")); // 设置OPTION的 TEXT
    select.appendChild(op);           // 为SELECT 新建一 OPTION(op)

    select.options.length=0;           //把select对象的所有option清除掉

    select.options.remove(i);           //把select对象的第i个option清除掉


     <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JS动态添加删除option</title>
    <script>
    //动态删除select中的所有options:
    function delAllOptions(){
          document.getElementById("user_dm").options.length=0;
    }
    //动态删除select中的某一项option:
    function delOneOption(indx){
          document.getElementById("user_dm").options.remove(indx);
    }

    // 动态添加select中的项option:
    function addOneOption(){
          //document.getElementById("user_dm").options.add(new Option(2,"mytest"));
      
       var selectObj=document.getElementById("user_dm");
       alert(selectObj.length);
       selectObj.options[selectObj.length] = new Option("mytest", "2");
    }
    </script>
    </head>
    <body>
    <select id="user_dm" name="user_dm">
    <option value="0" selecte>==请选择人员==</option>
    <option value="1">test</option>
    </select><br>
    <input type="button" onClick="addOneOption()" value="添加">
    <input type="button" onClick="delOneOption(1)" value="删除第一个">
    <input type="button" onClick="delAllOptions()" value="清空">
    </body>
    </html>

    ===============================================================================

     <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>Js动态添加与删除Option对象</TITLE>

    <script language="JavaScript">

    // 添加选项

    function addOption(pos){

    var objSelect=document.getElementById("mySelect");

        // 取得字段值

       //var strName = document.myForm.myOptionName.value;

        // var strValue = document.myForm.myOptionValue.value;

        // 建立Option对象

        var objOption = new Option("李高灰","bbbbbbbbb");

        if (pos == -1&& pos > objSelect.options.length))

           objSelect.options[objSelect.options.length] = objOption;

        else

           objSelect.add(objOption, pos);

    }

    // 删除

    function deleteOption(type){

    var objSelect=document.getElementById("mySelect");

        if (type == true)

           objSelect.options[objSelect.selectedIndex] = null;

        else

           objSelect.remove(objSelect.selectedIndex);

    }

    // 显示选项信息

    function showOption(){

    var objSelect=document.getElementById("mySelect");

        var name = objSelect.options[objSelect.selectedIndex].text;

        var value = objSelect.options[objSelect.selectedIndex].value;

        alert(name + " = " + value);

    }

    //动态删除select中的所有options:

    function clearAllOptions(){

       var objSelect=document.getElementById("mySelect");

       objSelect.options.length=0;

    }

    </script>

  • 相关阅读:
    Object.Instantiate 实例
    .idata数据的解析
    数据结构-静态链表
    数据结构-循环链表
    Android---两个视图间的淡入淡出
    HDU 4597 Play Game 2013 ACM-ICPC吉林通化全国邀请赛H题
    Android 编译时出现r cannot be resolved to a variable
    找工作笔试面试那些事儿(5)---构造函数、析构函数和赋值函数
    SFINAE 模板替换失败而非报错的应用
    模板实参推导 & xx_cast的实现
  • 原文地址:https://www.cnblogs.com/apache-x/p/5458571.html
Copyright © 2011-2022 走看看