詳細的<select>下拉列表詳解
我們使用表單下拉列表選擇數據，如省、市、縣、年、月等數據，我們即可使用下拉菜單表單進行設置。
select 我下拉列表菜單標簽
Option為下拉列表數據標簽
Value 為Option的數據值（用於數據的傳值）
select 元素可創建單選或多選菜單。當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，並且在將 <select> 表單數據提交給服務器時包括 name 屬性。
<select>標簽的使用技巧總結：
1、動態創建select
function 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"> functionmbar(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對象，
詳細的<select>下拉列表詳解