| 标题 | JavaScript控制两个列表框listbox左右交换数据的方法 |
| 内容 | 这篇文章主要介绍了JavaScript控制两个列表框listbox左右交换数据的方法,实例分析了javascript操作列表框listbox的技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法。分享给大家供大家参考。具体分析如下： 这个功能我们经常用到，将左边列表框的元素移动到右边，或者将右边列表框的元素移动到左边，可以一次性全部移动 代码如下: function listbox_moveacross(sourceID, destID) { var src = document.getElementById(sourceID); var dest = document.getElementById(destID); for(var count=0; count < src.options.length; count++) { if(src.options[count].selected == true) { var option = src.options[count]; var newOption = 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); // IE only src.remove(count); } count--; } } } //.. listbox_moveacross('countryList', 'selectedCountryList'); 下面是像是的演示效果代码，可以直接在浏览器内执行 代码如下: Click below buttons to move selected options right or left.<br> <table> <tbody><tr> <td> <select id="sourceSelect" size="10" multiple=""> <option value="a">Afghanistan</option> <option value="b">Bahamas</option> <option value="c">Barbados</option> <option value="d">Belgium</option> <option value="e">Bhutan</option> <option value="f">China</option> <option value="g">Croatia</option> <option value="h">Denmark</option> <option value="i">France</option> </select> </td> <td> <button onclick="listboxMoveacross('sourceSelect', 'destSelect');">>></button> <br> <button onclick="listboxMoveacross('destSelect', 'sourceSelect');"><<</button> </td> <td> <select id="destSelect" size="10" multiple=""> <option value="a">Afghanistan</option> <option value="b">Bahamas</option> <option value="c">Barbados</option> <option value="d">Belgium</option> <option value="e">Bhutan</option> <option value="f">China</option> <option value="g">Croatia</option> <option value="h">Denmark</option> <option value="i">France</option> </select> </td> </tr> </tbody></table> <script> function listboxMoveacross(sourceID, destID) { var src = document.getElementById(sourceID); var dest = document.getElementById(destID); for(var count=0; count < src.options.length; count++) { if(src.options[count].selected == true) { var option = src.options[count]; var newOption = 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); // IE only src.remove(count); } count--; } } } </script> 希望本文所述对大家的javascript程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。