基于JavaScript實現控制下拉列表
需求分析
在我們的分類管理中,我們要能夠去修改我們的分類信息,當我們一點修改的時候,跳轉到一個可以編輯的頁面,這里面能夠修改分類的名稱,分類的描述,以及分類的商品
技術分析
ondblclick='selectOne()'：雙擊事件select標簽的屬性multiple='multiple'：
代碼實現
<!DOCTYPE html><html><head><meta charset='UTF-8'><title></title><!--步驟分析1. 確定事件: 點擊事件 :onclick事件2. 事件要觸發函數 selectOne3. selectOne要做一些操作(將左邊選中的元素移動到右邊的select中)1. 獲取左邊Select中被選中的元素2. 將選中的元素添加到右邊的Select中就可以--><script>function selectOne(){//1. 獲取左邊Select中被選中的元素var leftSelect = document.getElementById('leftSelect');var options = leftSelect.options;//找到右側的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);}}}//將左邊所有的商品移動到右邊function selectAll(){//1. 獲取左邊Select中被選中的元素var leftSelect = document.getElementById('leftSelect');var options = leftSelect.options;//找到右側的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='手機數碼'/></td></tr><tr><td>分類描述</td><td><input type='text' value='這里面都是手機數碼'/></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>波導</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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備