javaScript操作option的添加删除

<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();">添加&gt;&gt;</a>
                                        <br /><br />
                                        <a href="javascript:delOption();">&lt;&lt;删除</a>
                                        <br /><br />
                                        <br /><br />
                                        <br /><br />
                                        <a href="javascript:addBatch();">批量添加&gt;&gt;</a>
                                        <br /><br />
                                        <a href="javascript:delBatch()">批量删除&lt;&lt;</a>
                                    </td>
                                   <td>
                                        <select name='left' id='left' multiple="multiple"  style='width:100px;height:210px;'></select>
                                    </td>
                                </tr>
                            </table>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值