微客导航 » 文章资讯 » JavaScript控制两个列表框listbox左右交换数据的方法

JavaScript控制两个列表框listbox左右交换数据的方法

2024-04-03 07:29:04 524

本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法。分享给大家供大家参考。具体分析如下：

这个功能我们经常用到，将左边列表框的元素移动到右边，或者将右边列表框的元素移动到左边，可以一次性全部移动

functionlistbox_moveacross(sourceID,destID){

   varsrc=document.getElementById(sourceID);

   vardest=document.getElementById(destID);

   for(varcount=0;count<src.options.length;count++){

       if(src.options[count].selected==true){

               varoption=src.options[count];

               varnewOption=document.createElement("option");

               newOption.value=option.value;

               newOption.text=option.text;

               newOption.selected=true;

               try{

                        dest.add(newOption,null);//Standard

                        src.remove(count,null);

                }catch(error){

                        dest.add(newOption);//IEonly

                        src.remove(count);

                }

               count--;

       }

   }

}

//..

listbox_moveacross('countryList','selectedCountryList');

下面是像是的演示效果代码，可以直接在浏览器内执行

Clickbelowbuttonstomoveselectedoptionsrightorleft.<br>

<table>

<tbody><tr>

   <td>

<selectid="sourceSelect"size="10"multiple="">

 <optionvalue="a">Afghanistan</option>

 <optionvalue="b">Bahamas</option>

 <optionvalue="c">Barbados</option>

 <optionvalue="d">Belgium</option>

 <optionvalue="e">Bhutan</option>

 <optionvalue="f">China</option>

 <optionvalue="g">Croatia</option>

 <optionvalue="h">Denmark</option>

 <optionvalue="i">France</option>

</select>

   </td>

   <td>

       <buttononclick="listboxMoveacross('sourceSelect','destSelect');">&gt;&gt;</button> <br>

       <buttononclick="listboxMoveacross('destSelect','sourceSelect');">&lt;&lt;</button>

   </td>

   <td>

<selectid="destSelect"size="10"multiple="">

 <optionvalue="a">Afghanistan</option>

 <optionvalue="b">Bahamas</option>

 <optionvalue="c">Barbados</option>

 <optionvalue="d">Belgium</option>

 <optionvalue="e">Bhutan</option>

 <optionvalue="f">China</option>

 <optionvalue="g">Croatia</option>

 <optionvalue="h">Denmark</option>

 <optionvalue="i">France</option>

</select>

   </td>

</tr>

</tbody></table>

   <script>

functionlistboxMoveacross(sourceID,destID){

   varsrc=document.getElementById(sourceID);

   vardest=document.getElementById(destID);

   for(varcount=0;count<src.options.length;count++){

       if(src.options[count].selected==true){

               varoption=src.options[count];

               varnewOption=document.createElement("option");

               newOption.value=option.value;

               newOption.text=option.text;

               newOption.selected=true;

               try{

                        dest.add(newOption,null);//Standard

                        src.remove(count,null);

                }catch(error){

                        dest.add(newOption);//IEonly

                        src.remove(count);

                }

               count--;

       }

   }

}

</script>

希望本文所述对大家的javascript程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

JavaScript控制两个列表框listbox左右交换数据的方法

热门推荐

随机推荐