首页 > 其他 > 详细

通过事件实时获取<select>标签选项时需要注意的问题。

时间:2021-01-05 15:04:51      阅读:18      评论:0      收藏:0      [点我收藏+]

 

  今天在编写下拉框事件时,发现需要根据选择不同省份,另一个下拉框实时更新出省份所在的城市,编写了简单的测试发现,不能简单地通过获取元素的值来进行判断,因为如果写出类似于“var province = document.getElementsById("ps").value”的话,这条语句只能获取对应<select>下的第一个<option>中的value值,对应到下面的代码,也就是无论你选择哪个省份,变量province只能获得“山东省”这个value值。

  通过查询各种资料,找到了一种解决方法(肯定还有其他方式……),就是:首先获取已经选择的选项下标,下标通常是从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>标签选项时需要注意的问题。

原文:https://www.cnblogs.com/moegarn/p/14235601.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!