選中下拉框中的選項實現左移右移
效果：
1. Html部分代碼
<body><table align="center"> <tr> <td ><select size="15" id="left" > <option>左1</option> <option>左2</option> <option>左3</option> <option>左4</option> <option>左5</option> <option>左6</option> <option>左7</option> <option>左8</option> <option>左9</option> <option>左10</option> </select></td> <td> <input type="button" value="MoveRight" onclick="moveRight()"><br> <input type="button" value="MoveAllRight" onclick="moveAllright()"/><br> <input type="button" value="MoveLeft" onclick="moveLeft()"><br> <input type="button" value="MoveAllLeft" onclick="moveAllLeft()"><br> </td> <td> <select size="15" id="right"> <option>右1</option> <option>右2</option> <option>右3</option> <option>右4</option> <option>右5</option> <option>右6</option> <option>右7</option> </select> </td> <td></td> </tr> </table></body>
2. JavaScript腳本代碼如下:
<script type="text/javascript"> function moveRight() { //獲取左邊select元素節點 var leftSelectNode = document.getElementById("left"); //獲取子元素節點數組 //如果選定的索引號為-1,則提示用戶 if (leftSelectNode.selectedIndex == -1) { alert("請選定需要移動的選項"); return; } //獲取待移動的選項 var waitSelection = leftSelectNode.options[leftSelectNode.selectedIndex]; //獲取右邊的selec元素節點并加入 var rightSelectNode = document.getElementById("right"); //右邊新增一個節點 rightSelectNode.appendChild(waitSelection); } function moveAllright() {//獲取select對象 var leftSelectNode = document.getElementById("left"); var rightSelectNode = document.getElementById("right"); var optionsNodes = leftSelectNode.options; var length = optionsNodes.length; for (var i = 0; i < length; i++) { rightSelectNode.appendChild(optionsNodes[0]); } } function moveLeft() { //獲取左邊的select對象 var rightSelectNode = document.getElementById("right"); //沒有選中則提示 if (rightSelectNode.selectedIndex == -1) { alert("請選擇一個選項"); return; } //獲取待移動的選項 var waitMoveNode = rightSelectNode.options[rightSelectNode.selectedIndex]; //獲取左邊的select對象 var leftSelectNode = document.getElementById("left"); //左邊的select對象加入節點 leftSelectNode.appendChild(waitMoveNode); } function moveAllLeft() { //獲取右邊的select對象 var rightSelectNode = document.getElementById("right"); var leftSelectNode = document.getElementById("left"); var length = rightSelectNode.options.length; //遍歷其option選項并加入到左邊的select中 for (var i = 0; i < length; i++) { leftSelectNode.appendChild(rightSelectNode.options[0]); } } </script>3.CSS簡單代碼如下:
<style> select, td { font:20px/40px '宋體'; } option {width: 100px; font:20px/40px '宋體'; } input { padding: 3px; font:20px/40px '宋體'; text-align: center; width: 130px; height: 40px; background-color: orange; } </style>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
