javaScript操作option的添加删除

最新推荐文章于 2020-08-26 22:18:33 发布

ILTough

最新推荐文章于 2020-08-26 22:18:33 发布

阅读量749

点赞数

分类专栏： javaScript 文章标签： javascript select option 删除添加

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/itough/article/details/18080241

版权

javaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<script type="text/javascript">

//移动

           function move(arg0,arg1,arg2){
               var arg0_id = document.getElementById(arg0);
               var arr_selected = [];
               if(arg2 == 0){
                   for(i=0;i<arg0_id.options.length;i++){
                       if(arg0_id.options[i].selected){
                           arr_selected.push(i);
                       }
                   }
                   if(arr_selected.length == 0){
                       alert("请至少选择一个选项");
                       return;
                   }
               }else{
                   for(i=0;i<arg0_id.options.length;i++){
                       arr_selected.push(i);
                   }
               }

               for(j=0;j<arr_selected.length;j++){
                   var text = arg0_id.options[arr_selected[j]-j].text;
                   var value = arg0_id.options[arr_selected[j]-j].value;
                   arg0_id.options.remove(arr_selected[j]-j);
                   var arg1_id = document.getElementById(arg1);
                   arg1_id.options[arg1_id.length]= new Option(text,value);
               }
           }
           //从左边到右边添加
           function addOption(){
               move("left","right",0);
           }
           //从右边到左边删除
           function delOption(){
               move("right","left",0);
           }
           //批量添加
            function addBatch(){
               move("left","right",1);
            }
            //批量删除
            function delBatch(){
               move("right","left",1);
            }
            //双击添加或删除
           window.οnlοad=function(){
                  document.getElementById("left").οndblclick=function(){
                      var text = this.options[this.selectedIndex].text;
                      var value = this.options[this.selectedIndex].value;
                      this.options.remove(this.selectedIndex);
                      var right = document.getElementById("right");
                      right.options[right.length] = new Option(text,value);
                  };
                  document.getElementById("right").οndblclick=function(){
                      var text = this.options[this.selectedIndex].text;
                      var value = this.options[this.selectedIndex].value;
                      this.options.remove(this.selectedIndex);
                      var left = document.getElementById("left");
                      left.options[left.length] = new Option(text,value);
                  };

}

</script>

<html>

<table border="0" cellspacing="0" cellpadding="1">
<tr>

                                       <td >
                                       <select multiple="multiple" name="right" id="right" style="width:100px;height:210px;">
                                       <option value="024">(024)沈阳市</option>
                                       <option value="0411">(0411)大连市</option>
                                       <option value="0412">(0412)鞍山市</option>
                                       <option value="0413">(0413)抚顺市</option>
                                       <option value="0414">(0414)本溪市</option>
                                       <option value="0415">(0415)丹东市</option>
                                       <option value="0416">(0416)锦州市</option>
                                       <option value="0417">(0417)营口市</option>
                                       <option value="0418">(0418)阜新市</option>
                                       <option value="0419">(0419)辽阳市</option>
                                       <option value="0427">(0427)盘锦市</option>
                                       <option value="0410">(0410)铁岭市</option>
                                       <option value="0421">(0421)朝阳市</option>
                                       <option value="0429">(0429)葫芦岛市</option>
                                       </select>
                                   </td>

                                   <td width="100" align="center" valign="middle">
                                       <a href="javascript:addOption();">添加>></a>
                                       <br /><br />
                                       <a href="javascript:delOption();"><<删除</a>
                                       <br /><br />
                                       <br /><br />
                                       <br /><br />
                                       <a href="javascript:addBatch();">批量添加>></a>
                                       <br /><br />
                                       <a href="javascript:delBatch()">批量删除<<</a>
                                   </td>
                               <td>
                                       <select name='left' id='left' multiple="multiple" style='width:100px;height:210px;'></select>
                                   </td>
                               </tr>
                           </table>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。