body中
<body> <div style=" margin-left:400px; margin-top:10px;"> <select multiple="multiple" style="float: left; 40px; height: 100px;" id="se1"> <option>添加</option> <option>删除</option> <option>修改</option> <option>查询</option> <option>打印</option> </select> <div style=" 50px; float: left; "> <input type="button" name="name" value=">" style=" 50px;" id="toRight" /> <input type="button" name="name" value="<" style=" 50px;" id="toLeft" /> <input type="button" name="name" value=">>" style=" 50px;" id="toAllLeft" /> <input type="button" name="name" value="<<" style=" 50px;" id="toAllRight" /> </div> <select multiple="multiple" style="float: left; 40px; height: 100px;" id="se2"> </select> </div> </body>
<script>中
<script type="text/javascript"> window.onload = function () { document.getElementById('toAllLeft').onclick = function () { leftAllToRight(document.getElementById('se1'), document.getElementById('se2')); }; document.getElementById('toAllRight').onclick = function () { leftAllToRight(document.getElementById('se2'), document.getElementById('se1')); }; //=========================== document.getElementById('toRight').onclick = function () { lfttoRight(document.getElementById('se1'), document.getElementById('se2')); }; document.getElementById('toLeft').onclick = function () { lfttoRight(document.getElementById('se2'), document.getElementById('se1')); }; }; //se1表示第一个下拉框,se2表示第二个下拉框 function leftAllToRight(s1,s2) { var opts = s1.getElementsByTagName('option'); for (var i = opts.length - 1; i >= 0; i--) { s2.insertBefore(opts[i],s2.firstChild); } } function lfttoRight(s1,s2) { var opts = s1.getElementsByTagName('option'); for (var i = 0; i < opts.length; i++) { if (opts[i].selected) { s2.appendChild(opts[i]); i--; } } } </script>
效果