欢迎光临
我的个人博客网站

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

 

  今天编写了一个下拉框事件,功能是根据用户选择不同省份,另一个下拉框实时更新出省份所在的城市。我编写了一个简单的测试用例后发现,不能简单地通过获取元素的值来进行判断,因为如果写出类似于“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;

 

  最后,虽然解决了问题,但是我还是觉得这种写法有些麻烦,所以,有时间会继续寻找更加简洁且高效的写法。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 通过事件实时获取<select>标签选项时需要注意的问题。
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏