jQuery 二级联动(小问题修正)

栏目: jQuery · 发布时间: 7年前

内容简介：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