<form action="" method="post"> <table border="1"> <tr> <td> <select name="first" size="10" multiple="multiple" id="first"> <option value="选项1">选项1</option> <option value="选项2">选项2</option> <option value="选项3">选项3</option> <option value="选项4">选项4</option> <option value="选项5">选项5</option> <option value="选项6">选项6</option> <option value="选项7">选项7</option> <option value="选项8">选项8</option> </select> </td> <td valign="middle"> <input name="left" id="left" type="button" value="左移一个" /><br/> <input name="left_all" id="left_all" type="button" value="全部左移" /><br/> <input name="right" id="right" type="button" value="右移一个" /><br/> <input name="right_all" id="right_all" type="button" value="全部右移" /> </td> <td> <select name="second" size="10" multiple="multiple" id="second"> <option value="选项9">选项9</option> </select> </td> </tr> </table> </form> <script type="text/javascript"> /*********************** 单击向左移动一个或者多个 ****************************/ document.getElementById("left").onclick = function(){ var firstElement = document.getElementById("first"); var secondElement = document.getElementById("second"); var optionElements = firstElement.getElementsByTagName("option"); for (var i = 0; i < optionElements.length; i++) { if (firstElement.selectedIndex != -1) { secondElement.appendChild(optionElements[firstElement.selectedIndex]); } } } /*********************** 单击向左移动全部 ****************************/ document.getElementById("left_all").onclick = function(){ var firstElement=document.getElementById("first"); var secondElement=document.getElementById("second"); var optionElements=firstElement.getElementsByTagName("option"); var len=optionElements.length; for(var i=0;i<len;i++){ secondElement.appendChild(optionElements[0]); } } /*********************** 双击向左移动一个或者多个 ****************************/ document.getElementById("first").ondblclick = function(){ var secondElement=document.getElementById("second"); secondElement.appendChild(this[this.selectedIndex]); } ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /*********************** 单击向右移动一个或者多个 ****************************/ document.getElementById("right").onclick = function(){ var firstElement = document.getElementById("first"); var secondElement = document.getElementById("second"); var optionElements = secondElement.getElementsByTagName("option"); for (var i = 0; i < optionElements.length; i++) { if (secondElement.selectedIndex != -1) { firstElement.appendChild(optionElements[secondElement.selectedIndex]); } } } /*********************** 单击向右移动全部 ****************************/ document.getElementById("right_all").onclick = function(){ var firstElement=document.getElementById("first"); var secondElement=document.getElementById("second"); var optionElements=secondElement.getElementsByTagName("option"); var len=optionElements.length; for(var i=0;i<len;i++){ firstElement.appendChild(optionElements[0]); } } /*********************** 双击向右移动一个或者多个 ****************************/ document.getElementById("second").ondblclick = function(){ var firstElement=document.getElementById("first"); firstElement.appendChild(this[this.selectedIndex]); } </script>
相关推荐
Web设计开发常用Javascript例子
相当好的javascript例子,共有320c例子
博文链接:https://fuhao9611.iteye.com/blog/72257
JavaScript 例子,学习JavaScript非常有用的例子
JAVASCRIPT例子
js特效 javascript例子做出html无法做出的效果,css还有
Javascript例子对联广告
较为实用的javascript例子手册-站长力量网较为实用的javascript例子手册-站长力量网
一个简单的例子程序,简单描述了JS的简单制作
javascript例子教程20120614.docx
javascript例子教程0614.pdf
javascript例子教程20120614.pdf
javascript例子教程20220614整理.pdf
javascript例子教程20210614借鉴.pdf
经典JavaScript例子 经典JavaScript例子 经典JavaScript例子
一个简单的JavaScript例子,虽然简单,但却实用,刚加入CSDN,所以希望大家多支持,(^_^)/ 谢谢 ,喜欢javascript的来看看吧。。
非常实用的网站制作资(省市县三级联动、JavaScript例子显示及源代码等)料.rar非常实用的网站制作资(省市县三级联动、JavaScript例子显示及源代码等)料.rar