您好,登錄后才能下訂單哦!
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)左右下拉框動(dòng)態(tài)增刪示例,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
選中下拉框中的選項(xiàng)實(shí)現(xiàn)左移右移
效果:
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元素節(jié)點(diǎn) var leftSelectNode = document.getElementById("left"); //獲取子元素節(jié)點(diǎn)數(shù)組 //如果選定的索引號(hào)為-1,則提示用戶(hù) if (leftSelectNode.selectedIndex == -1) { alert("請(qǐng)選定需要移動(dòng)的選項(xiàng)"); return; } //獲取待移動(dòng)的選項(xiàng) var waitSelection = leftSelectNode.options[leftSelectNode.selectedIndex]; //獲取右邊的selec元素節(jié)點(diǎn)并加入 var rightSelectNode = document.getElementById("right"); //右邊新增一個(gè)節(jié)點(diǎn) rightSelectNode.appendChild(waitSelection); } function moveAllright() {//獲取select對(duì)象 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對(duì)象 var rightSelectNode = document.getElementById("right"); //沒(méi)有選中則提示 if (rightSelectNode.selectedIndex == -1) { alert("請(qǐng)選擇一個(gè)選項(xiàng)"); return; } //獲取待移動(dòng)的選項(xiàng) var waitMoveNode = rightSelectNode.options[rightSelectNode.selectedIndex]; //獲取左邊的select對(duì)象 var leftSelectNode = document.getElementById("left"); //左邊的select對(duì)象加入節(jié)點(diǎn) leftSelectNode.appendChild(waitMoveNode); } function moveAllLeft() { //獲取右邊的select對(duì)象 var rightSelectNode = document.getElementById("right"); var leftSelectNode = document.getElementById("left"); var length = rightSelectNode.options.length; //遍歷其option選項(xiàng)并加入到左邊的select中 for (var i = 0; i < length; i++) { leftSelectNode.appendChild(rightSelectNode.options[0]); } } </script>
3.CSS簡(jiǎn)單代碼如下:
<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>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“JavaScript如何實(shí)現(xiàn)左右下拉框動(dòng)態(tài)增刪示例”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。