基于JavaScript實現(xiàn)控制下拉列表
需求分析
在我們的分類管理中,我們要能夠去修改我們的分類信息,當(dāng)我們一點修改的時候,跳轉(zhuǎn)到一個可以編輯的頁面,這里面能夠修改分類的名稱,分類的描述,以及分類的商品
技術(shù)分析
ondblclick='selectOne()'：雙擊事件select標(biāo)簽的屬性multiple='multiple'：
代碼實現(xiàn)
<!DOCTYPE html><html><head><meta charset='UTF-8'><title></title><!--步驟分析1. 確定事件: 點擊事件 :onclick事件2. 事件要觸發(fā)函數(shù) selectOne3. selectOne要做一些操作(將左邊選中的元素移動到右邊的select中)1. 獲取左邊Select中被選中的元素2. 將選中的元素添加到右邊的Select中就可以--><script>function selectOne(){//1. 獲取左邊Select中被選中的元素var leftSelect = document.getElementById('leftSelect');var options = leftSelect.options;//找到右側(cè)的Selectvar rightSelect = document.getElementById('rightSelect');//遍歷找出被選中的optionfor(var i=0; i < options.length; i++){var option1 = options[i];if(option1.selected){//2. 將選中的元素添加到右邊的Select中就可以rightSelect.appendChild(option1);}}}//將左邊所有的商品移動到右邊f(xié)unction selectAll(){//1. 獲取左邊Select中被選中的元素var leftSelect = document.getElementById('leftSelect');var options = leftSelect.options;//找到右側(cè)的Selectvar rightSelect = document.getElementById('rightSelect');//遍歷找出被選中的optionfor(var i=options.length - 1; i >=0; i--){var option1 = options[i];rightSelect.appendChild(option1);}}</script></head><body><table border='1px' width='400px'><tr><td>分類名稱</td><td><input type='text' value='手機數(shù)碼'/></td></tr><tr><td>分類描述</td><td><input type='text' value='這里面都是手機數(shù)碼'/></td></tr><tr><td>分類商品</td><td><!--左邊--><div style='float: left;'>已有商品<br /><select multiple='multiple' ondblclick='selectOne()'><option>華為</option><option>小米</option><option>錘子</option><option>oppo</option></select><br /><a href='http://www.aoyou183.cn/bcjs/16678.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' onclick='selectOne()'> >> </a> <br /><a href='http://www.aoyou183.cn/bcjs/16678.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' onclick='selectAll()'> >>> </a></div><!--右邊--><div style='float: right;'> 未有商品<br /><select multiple='multiple' id='rightSelect'><option>蘋果6</option><option>腎7</option><option>諾基亞</option><option>波導(dǎo)</option></select><br /><a href='http://www.aoyou183.cn/bcjs/16678.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' > << </a> <br /><a href='http://www.aoyou183.cn/bcjs/16678.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' > <<< </a></div></td></tr><tr><td colspan='2'><input type='submit' value='提交'/></td></tr></table></body></html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP.NET MVC把數(shù)據(jù)庫中枚舉項的數(shù)字轉(zhuǎn)換成文字2. 用xslt+css讓RSS顯示的跟網(wǎng)頁一樣漂亮3. 《CSS3實戰(zhàn)》筆記--漸變設(shè)計（一)4. .NET擴展方法使用實例詳解5. 測試模式 - XSL教程 - 56. 讓chatgpt將html中的圖片轉(zhuǎn)為base64方法示例7. html5手機觸屏touch事件介紹8. CSS3實現(xiàn)動態(tài)翻牌效果 仿百度貼吧3D翻牌一次動畫特效9. ASP.NET Core自定義中間件的方式詳解10. ASP.NET泛型三之使用協(xié)變和逆變實現(xiàn)類型轉(zhuǎn)換
網(wǎng)公網(wǎng)安備