今天撰寫了一個下拉框事件，功能是根據用戶選擇不同省份，另一個下拉框實時更新出省份所在的城市，我撰寫了一個簡單的測驗用例后發現，不能簡單地通過獲取元素的值來進行判斷，因為如果寫出類似于“var province = document.getElementsById("ps").value”的話是有問題的（selected="select"表示預選項），
通過查詢各種資料，找到了一種解決方法（肯定還有其他方式……），就是：首先獲取已經選擇的選項下標，下標通常是從0開始，這里就不多贅述了，學過變成的小伙伴肯定都知道，獲取下標后還沒有完成，我們需要根據下標獲取該下標對應選項中的value值，正如以下代碼所示：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <script type="text/javascript">
8
9 function province() {
10 var index = document.getElementById("ps").selectedIndex;
11 var p = document.getElementById("ps").options[index].value;
12 var c = document.getElementById("c").options;
13 console.log(p);
14 c.length = 0;
15 c.add(new Option("-請選擇-", "-請選擇-"));
16 if (p == "山東省") {
17 console.log("shandong");
18 c.add(new Option("濟南", "濟南"));
19 c.add(new Option("濰坊", "濰坊"));
20 }
21 if (p == "浙江省") {
22 console.log("zhejiang");
23 c.add(new Option("杭州", "杭州"));
24 c.add(new Option("寧波", "寧波"));
25 }
26 }
27
28 </script>
29 <body>
30
31 <span>省份</span>
32 <select id="ps" onchange="province()">
33 <option selected="selected">-請選擇-</option>
34 <option value="山東省">山東省</option>
35 <option value="浙江省">浙江省</option>
36 </select>
37 <span>市區</span>
38 <select id="c">
39 <option selected="selected">-請選擇-</option>
40 </select>
41
42 </body>
43 </html>
在以上代碼的第11行和第12行中，首先獲取了id名為“ps”的元素（也就是select）的已選中的選項下標，然后再根據下標獲取到該選項的value值，其實可以直接把賦值給變數index的那段運算式直接放到第12行的index的位置，只是因為看起來不明了，所以我在這里分開寫了，
總結：
//獲取select標簽已選中的選項下標 var index = document.getElementsById("<select>標簽的id").selectedindex; //根據選項下標獲取對應選項的value值 var selectedvalue = https://www.cnblogs.com/moegarn/p/document.getElementsById("<select>標簽的id").options[index].value;
最后，雖然解決了問題，但是我還是覺得這種寫法有些麻煩，所以，有時間會繼續尋找更加簡潔且高效的寫法，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/245116.html
標籤：JavaScript
上一篇：你應該了解的25個JS技巧