基于JavaScript實(shí)現(xiàn)控制下拉列表
需求分析
在我們的分類管理中,我們要能夠去修改我們的分類信息,當(dāng)我們一點(diǎn)修改的時(shí)候,跳轉(zhuǎn)到一個(gè)可以編輯的頁面,這里面能夠修改分類的名稱,分類的描述,以及分類的商品
技術(shù)分析
ondblclick='selectOne()'：雙擊事件select標(biāo)簽的屬性multiple='multiple'：
代碼實(shí)現(xiàn)
<!DOCTYPE html><html><head><meta charset='UTF-8'><title></title><!--步驟分析1. 確定事件: 點(diǎn)擊事件 :onclick事件2. 事件要觸發(fā)函數(shù) selectOne3. selectOne要做一些操作(將左邊選中的元素移動(dòng)到右邊的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);}}}//將左邊所有的商品移動(dòng)到右邊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='手機(jī)數(shù)碼'/></td></tr><tr><td>分類描述</td><td><input type='text' value='這里面都是手機(jī)數(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.intensediesel.com/bcjs/16678.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' onclick='selectOne()'> >> </a> <br /><a href='http://www.intensediesel.com/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.intensediesel.com/bcjs/16678.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' > << </a> <br /><a href='http://www.intensediesel.com/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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 得到XML文檔大小的方法2. WMLScript的語法基礎(chǔ)3. 使用Spry輕松將XML數(shù)據(jù)顯示到HTML頁的方法4. ASP中if語句、select 、while循環(huán)的使用方法5. xml中的空格之完全解說6. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問題……7. 輕松學(xué)習(xí)XML教程8. html小技巧之td,div標(biāo)簽里內(nèi)容不換行9. XML入門的常見問題(四)10. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法
網(wǎng)公網(wǎng)安備