Menu

原生js实现select中的option的添加和删除

2016年8月20日 - php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作select</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #container{
            width:500px;
            margin:0 auto;
            height:160px;
            background-color:pink;
        }
        #left,#middle,#right{
            float:left;
            width:124px;
            margin:5px 20px 5px 25px;
        }
        #middle button{
            width:75px;
            margin:5px 10px 0 0;
        }
    </style>
</head>
<body>
<div id="container">
<div id="left">
<select name="city" id="city" size="4" style="font-size:16px;margin:30px 0 0 35px;">
    <option value="shanghai">上海</option>
    <option value="beijing">北京</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
</select>
</div>
<div id="middle" style="margin:40px 0 50px 35px;">
       <!-- <button id="mul">多选</button>-->
        <button id="tright">></button>
        <button id="tleft"><</button>
</div>
<div id="right">
<select name="area" id="area" size="4" style="font-size:16px;margin:30px 0 0 35px;">
    <option value="nanjing">南京</option>
    <option value="wuhan">武汉</option>
    <option value="hangzhou">杭州</option>
    <option value="jinan">济南</option>
</select>
</div>
</div>
</body>
<script type="text/javascript">
    function back(){
        history.back();
    }
   function go(){
        history.go(-1);
    }
    var tleft = document.getElementById("tleft");
    var tright = document.getElementById("tright");
    var city = document.getElementById("city");
    var area = document.getElementById("area");
   /* var choose = document.getElementById("mul");*/
    //console.log(left.id+" "+right.id);
    /*choose.onclick = function(){//启用多选按钮
        city.multiple = true;
        area.multiple = true;
    }*/
    function object(x,y){
        var createOption = document.createElement('option');
              /*(1) y.options.add(new Option(createOption.text,null)); //这个兼容IE与firefox*/
               /* console.log(x.options[i].text);*/
              /*(2) createOption.text = x.options[x.selectedIndex].text;
                try {
                    y.add(createOption, null);//标准方式,null表示添加option到select中option中的最后,
                }catch(e){
                    y.add(createOption);//兼容IE浏览器
                }
               */
            
                x.remove(x.selectedIndex);
        x.size = x.length;
        y.size = y.length;
    }
    tright.onclick = function(){
        object(city,area);
    }
    tleft.onclick = function(){
        object(area,city);
    }

</script>
</html>

//我的博客好久没有更新了,但这并不代表我放弃了。
ps:通过原生js实现select中的option的添加和删除,这个代码在firefox和ie下测试过,均没有问题。
   (1)和(2)是两种添加option项目的方法,其中(1)中的options可有可无。
  
或许我不够聪明,固执,或许已经让别人失望透了,我不想解释,走自己的路,咱走着瞧。
分享
标签:,

2 thoughts on “原生js实现select中的option的添加和删除

博主

JavaScript中的select和option标签的小小应用,可读性不强。




1



0
小白

确实,可读性太差了。




0



0

发表评论