JavaScript控制两个列表框listbox左右交换数据的方法
本文实例讲述了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');">>></button> <br> <buttononclick="listboxMoveacross('destSelect','sourceSelect');"><<</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程序设计有所帮助。