设为首页收藏本站

就爱编程论坛

 找回密码
 注册

人人连接登陆

无需注册,直接登录

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

查看: 559|回复: 1
打印 上一主题 下一主题

JS动态添加与删除select中的Option对象 [复制链接]

Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    我玩的应用:

    跳转到指定楼层
    楼主
    发表于 2011-7-4 18:04:43 |只看该作者 |倒序浏览
    <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" value="添加">
    <input type="button" value="删除第一个">
    <input type="button" value="清空">
    </body>
    </html>
    http://www.cnblogs.com/leosky2008/archive/2007/07/17/821061.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("aaaaaaaa","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>
    </HEAD>
    <BODY>
    <h2>Js动态添加与删除Option对象</h2>
    <hr>
    <select id="mySelect" name="mySelect">
    <option value="中国" Selected>中国</option>
    <option value="日本">日本</option>
    <option value="美国">美国</option>
    </select>
    <input type="button" value="显示">
    <input type="button" value="删除">
    <input type="button" value="Remove方法"><br><br>
    选项名称 : <input type="text" name="myOptionName" value="英国"><br>
    选项的值 : <input type="text" name="myOptionValue" value="value4">
    <input type="button" value="添加">
    <input type="button" value="插入到最前面">
    <input type="button" value="清空">
    </BODY>
    </HTML>
    分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    分享分享0 收藏收藏0 支持支持0 反对反对0 分享到人人 转发到微博
    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    沙发
    发表于 2011-7-4 18:05:44 |只看该作者
    js 动态添加、删除 select 的 option


    <select id="ddlResourceType" onchange="getvalue(this)">   </select>  
    <select id="ddlResourceType" onchange="getvalue(this)">
    </select>
            动态删除 select 中的所有 options:


    document.getElementById("ddlResourceType").options.length=0;  
    document.getElementById("ddlResourceType").options.length=0;
            动态删除 select中 的某一项 option:

    view plaincopy to clipboardprint?
    document.getElementById("ddlResourceType").options.remove(indx);  
    document.getElementById("ddlResourceType").options.remove(indx);
            动态添加 select 中的项 option:

    view plaincopy to clipboardprint?
    document.getElementById("ddlResourceType").options.add(new Option(text,value));  
    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册 人人连接登陆

    晴云孤魂's Blog|就爱编程搜帖|手机版|Archiver|就爱编程论坛     

    GMT+8, 2025-7-2 13:55 , Processed in 0.100474 second(s), 28 queries .

    Powered by Discuz! X2

    © 2001-2011 Comsenz Inc.

    回顶部