今天编写了一个下拉框事件，功能是根据用户选择不同省份，另一个下拉框实时更新出省份所在的城市。我编写了一个简单的测试用例后发现，不能简单地通过获取元素的值来进行判断，因为如果写出类似于"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 = document.getElementsById("<select>标签的id").options[index].value;
最后，虽然解决了问题，但是我还是觉得这种写法有些麻烦，所以，有时间会继续寻找更加简洁且高效的写法。
原文转载：http://www.shaoqun.com/a/505941.html
c88：https://www.ikjzd.com/w/1017.html
krazy：https://www.ikjzd.com/w/1801
今天编写了一个下拉框事件，功能是根据用户选择不同省份，另一个下拉框实时更新出省份所在的城市。我编写了一个简单的测试用例后发现，不能简单地通过获取元素的值来进行判断，因为如果写出类似于"varprovince=document.getElementsById("ps").value"的话是有问题的（selected="select"表示预选项）。 通过查询各
刘小东：刘小东
tiki：tiki
景区变化日新月异 厦门旅游导游词将全面更新：景区变化日新月异 厦门旅游导游词将全面更新
Power Seller：Power Seller
爆品榜出炉：Shopee 12.12大促跨境单量达平日10倍 ！：爆品榜出炉：Shopee 12.12大促跨境单量达平日10倍 ！
没有评论:
发表评论