碼上歡樂
首頁
榜單
標簽
關於
搜索
相關內容
簡體
繁體
詳細的
下拉列表詳解 本文轉載自 查看原文 2017-06-06 11:46 3866 select/ JS和JS框架 我們使用表單下拉列表選擇數據，如省、市、縣、年、月等數據，我們即可使用下拉菜單表單進行設置。select 我下拉列表菜單標簽Option為下拉列表數據標簽Value 為Option的數據值（用於數據的傳值） select 元素可創建單選或多選菜單。當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，並且在將 <select> 表單數據提交給服務器時包括 name 屬性。 <select>標簽的使用技巧總結： 1、動態創建selectfunction createSelect () { var mySelect = document.createElement("select"); mySelect.id = "mySelect"; docuemnt.body.appendChild(mySelect); }2、添加一個選項 function addOption () { var obj = document.getElementById("mySelect"); obj.add(new Option("文本", "值")) } 3、刪除所有的option obj.options.length = 0; 4、獲取選中的索引 var index = obj.selectedIndex; 刪除 obj.options.remove(index); 獲取value值：obj.options[index].value; 獲取文本的值： obj.options[index].text; 5、刪除select var mySelect = document.getElementById("mySelect"); mySelect.parentNode.removeChild(mySelect); 6、讓html里面的select無法選擇？ 放一個option或者給option加上 disable = "disabled"; 7、給html select 標簽加鏈接的方法： a、 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>select加鏈接</title> </head> <body> <script type="text/javascript"> function mbar(sobj) { var docurl = sobj.options[sobj.selectedIndex].value; if (docurl !='') { open(docurl, '_blank'); sobj.selectedIndex = 0; sobj.blur();//失去焦點 } } </script> <select name="change_select" id="change_select" onchange=mbar(this)> <option value="http://www.root.com/test/exercise/s1.html">我的本地項目</option> <option value="https://www.baidu.com/?tn=47018152_dg">百度</option> <option value="http://www.imooc.com/u/1891279">慕課網課程</option> <option value="http://fanyi.baidu.com/#en/zh/restore">翻譯</option> </select> </body> </html> 第二種： <select name="change_select" id="change_select" onchange="self.location.href=options[selectedIndex].value"> <option value="http://www.root.com/test/exercise/s1.html">我的本地項目</option> <option value="https://www.baidu.com/?tn=47018152_dg">百度</option> <option value="http://www.imooc.com/u/1891279">慕課網課程</option> <option value="http://fanyi.baidu.com/#en/zh/restore">翻譯</option> </select> 第三種： <select name="change_select" id="change_select" onchange=mbar(this)> <option value="1">百度</option> <option value="2">慕課網課程</option> <option value="3">翻譯</option> </select> <input type="button" id= "btn" value="提交" oonclick="submit(this)" /> js: <script type="text/javascript"> function submit () { if(mylink.value == 0) window.location='http://www.baidu.com'; if(mylink.value == 1) window.location='http://www.w3cschool.cn'; if(mylink.value == 2) window.location='http://www.youj.com'; } </script> 其中最要的是獲取給select下拉列表元素綁定一個change()事件，就是當這個元素的值發生改變的時候會觸發此方法, 然后還有一個就是獲取當前選中的option索引： var index = selectObj.selectedIndex; var value = selectObj.options[index].value; var text = selectObj.options[index].text; 其他知識點： Location對象： Location對象是Window對象的一個部分，可通過window.location屬性來訪問。 location.reload()刷新當前文檔 location.href 設置或返回完整的 URL。 top： 該變更永遠指分割窗口最高層次的瀏覽器窗口。如果計划從分割窗口的最高層次開始執行命令，就可以用top變量。 parent： 該變量指的是包含當前分割窗口的父窗口。如果在一個窗口內有分割窗口，而在其中一個分割窗口中又包含着分割窗口，則第2層的分割窗口可以用parent變量引用包含它的父分割窗口。 opener： 指用WINDOW.OPEN等方式創建的新窗口對應的原窗口。 附：Window對象、Parent對象、Frame對象、Document對象和Form對象的階層關系：Windwo對象→Parent對象→Frame對象→Document對象→Form對象， × 免責聲明！ 本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。 猜您在找 html中select標簽（下拉列表）的詳細介紹 select表單元素詳解及下拉列表模擬實現 jQuery動態加載select下拉列表 Robotframework之下拉列表select select 下拉列表change事件 select兩個關聯的下拉列表 Select多選框下拉列表 下拉列表 select-option ; select-optgroup-option 純css修改下拉列表select的默認樣式 獲取select下拉列表框的值 粵ICP備18138465號 © 2018-2025 CODEPRJ.COM
