内容简介：jQuery 二级联动(小问题修正)
从网上找了一个jQuery二级联动的代码段，调试了半天，发现在jQuery新版本下一直不可以用，很郁闷。最后请教了朋友才解决，这里记录下解决的过程。
代码段功能:页面上呈现两个select选项，当左边选择北京时，右边的选项对应为东城、西城、崇文、宣武、朝阳；当左边选择上海时，右边对应的为黄浦、卢湾、徐汇、长宁、静安……
最终的代码为:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>jQuery 二级联动</title>
6
7 <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
8 <script type="text/javascript">
9 $(document).ready(function(){
10 $("#province").change(function(){
11 $("#province option").each(function(i,o){
12 if($(this).prop("selected"))
13 //alert($(this).attr("selected"));
14 //if($(this).attr("selected"))
15 {
16 $(".city").hide();
17 $(".city").eq(i).show();
18 }
19 });
20 });
21 $("#province").change();
22 });
23 </script>
24 </head>
25
26 <body>
27 <select id="province">
28 <option>----请选择省份----</option>
29 <option>北京 </option>
30 <option>上海 </option>
31 <option>江苏 </option>
32 </select>
33
34 <select class="city">
35 <option>----请选择城市----</option>
36 </select>
37
38 <select class="city">
39 <option>东城</option>
40 <option>西城</option>
41 <option>崇文</option>
42 <option>宣武</option>
43 <option>朝阳</option>
44 </select>
45
46 <select class="city">
47 <option>黄浦</option>
48 <option>卢湾</option>
49 <option>徐汇</option>
50 <option>长宁</option>
51 <option>静安</option>
52 </select>
53
54 <select class="city">
55 <option>南京</option>
56 <option>镇江</option>
57 <option>苏州</option>
58 <option>南通</option>
59 <option>扬州</option>
60 </select>
61 </body>
62 </html>
解决过程: 之前加载的是1.3.2版本的jQuery,改为3.2.2后就有问题了。排错过程无他，一步一步alert变量，发现alert($(this).attr(“selected”))未定义，就确定是这个地方有问题了，再接着百度，发现了attr和prop的区别，得知在新版本里获得select的selected属性需要用prop，于是问题解决。
参考资料:
jquery中attr和prop的区别: http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html
jQuery 事件 - change() 方法: http://www.w3school.com.cn/jquery/event_change.asp
jQuery 遍历 - each() 方法: http://www.w3school.com.cn/jquery/traversing_each.asp
基于jquery的二级联动菜单实现代码: http://www.jb51.net/article/26947.htm
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
