JavaScript實現(xiàn)左右下拉框動態(tài)增刪示例
選中下拉框中的選項實現(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é)點 var leftSelectNode = document.getElementById("left"); //獲取子元素節(jié)點數(shù)組 //如果選定的索引號為-1,則提示用戶 if (leftSelectNode.selectedIndex == -1) { alert("請選定需要移動的選項"); return; } //獲取待移動的選項 var waitSelection = leftSelectNode.options[leftSelectNode.selectedIndex]; //獲取右邊的selec元素節(jié)點并加入 var rightSelectNode = document.getElementById("right"); //右邊新增一個節(jié)點 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對象加入節(jié)點 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 禁止用戶保存圖片的實現(xiàn)代碼
這篇文章主要介紹了JavaScript 禁止用戶保存圖片的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04通過event對象的fromElement屬性解決熱區(qū)設(shè)置主實體的一個bug
后臺的熱區(qū)管理中,如果鼠標(biāo)移到熱區(qū)上,會顯示一個提示框,提示框里“設(shè)為主實體”、“刪除”和“合并”等超鏈接,點擊這些超鏈接可以進(jìn)行各種操作。2008-12-12Javascript中Promise的四種常用方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Javascript中Promise的四種常用方法,分別是處理異步回調(diào)、多個異步函數(shù)同步處理、異步依賴異步回調(diào)和封裝統(tǒng)一的入口辦法或者錯誤處理,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07Bootstrap實現(xiàn)下拉菜單多級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了Bootstrap實現(xiàn)下拉菜單多級聯(lián)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11理解Javascript_02_理解undefined和null
其實在 ECMAScript 的原始類型中,是有Undefined 和 Null 類型的。 這兩種類型都分別對應(yīng)了屬于自己的唯一專用值,即undefined 和 null。2010-10-10Base64(二進(jìn)制)圖片編碼解析及在各種瀏覽器的兼容性處理
這篇文章主要介紹了Base64(二進(jìn)制)圖片編碼解析及在各種瀏覽器的兼容性處理,需要的朋友可以參考下2017-02-02JavaScript 快捷鍵設(shè)置實現(xiàn)代碼
屏蔽Alt+F4等快捷鍵 IE Javascript快捷鍵操作2009-03-03