JavaScript實(shí)現(xiàn)左右下拉框動(dòng)態(tài)增刪示例
選中下拉框中的選項(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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)帶搜索功能的下拉框?qū)崟r(shí)搜索實(shí)時(shí)匹配
- jquery及原生js獲取select下拉框選中的值示例
- js 動(dòng)態(tài)選中下拉框
- JS實(shí)現(xiàn)下拉框的動(dòng)態(tài)添加(附效果)
- JS操作select下拉框動(dòng)態(tài)變動(dòng)(創(chuàng)建/刪除/獲取)
- Js獲取下拉框選定項(xiàng)的值和文本的實(shí)現(xiàn)代碼
- javascript下拉框選項(xiàng)單擊事件的例子分享
- js實(shí)現(xiàn)Select下拉框具有輸入功能的方法
- JSP單選按鈕驗(yàn)證、下拉框驗(yàn)證、復(fù)選框驗(yàn)證實(shí)現(xiàn)代碼
相關(guān)文章
JavaScript 禁止用戶(hù)保存圖片的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript 禁止用戶(hù)保存圖片的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04通過(guò)event對(duì)象的fromElement屬性解決熱區(qū)設(shè)置主實(shí)體的一個(gè)bug
后臺(tái)的熱區(qū)管理中,如果鼠標(biāo)移到熱區(qū)上,會(huì)顯示一個(gè)提示框,提示框里“設(shè)為主實(shí)體”、“刪除”和“合并”等超鏈接,點(diǎn)擊這些超鏈接可以進(jìn)行各種操作。2008-12-12Javascript中Promise的四種常用方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Javascript中Promise的四種常用方法,分別是處理異步回調(diào)、多個(gè)異步函數(shù)同步處理、異步依賴(lài)異步回調(diào)和封裝統(tǒng)一的入口辦法或者錯(cuò)誤處理,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-07-07Bootstrap實(shí)現(xiàn)下拉菜單多級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)下拉菜單多級(jí)聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11理解Javascript_02_理解undefined和null
其實(shí)在 ECMAScript 的原始類(lèi)型中,是有Undefined 和 Null 類(lèi)型的。 這兩種類(lèi)型都分別對(duì)應(yīng)了屬于自己的唯一專(zhuān)用值,即undefined 和 null。2010-10-10js判斷undefined變量類(lèi)型使用typeof
js判斷undefined變量類(lèi)型使用typeof可以輕松實(shí)現(xiàn),不了解的朋友可以參考下哈,希望對(duì)你有所幫助2013-06-06Base64(二進(jìn)制)圖片編碼解析及在各種瀏覽器的兼容性處理
這篇文章主要介紹了Base64(二進(jìn)制)圖片編碼解析及在各種瀏覽器的兼容性處理,需要的朋友可以參考下2017-02-02javascript中cookie對(duì)象用法實(shí)例分析
這篇文章主要介紹了javascript中cookie對(duì)象用法,實(shí)例分析了javascript針對(duì)cookie對(duì)象的寫(xiě)入、讀取及刪除等操作的使用方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01JavaScript 快捷鍵設(shè)置實(shí)現(xiàn)代碼
屏蔽Alt+F4等快捷鍵 IE Javascript快捷鍵操作2009-03-03