内容简介：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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Parsing Techniques
Dick Grune、Ceriel J.H. Jacobs / Springer / 2010-2-12 / USD 109.00
This second edition of Grune and Jacobs' brilliant work presents new developments and discoveries that have been made in the field. Parsing, also referred to as syntax analysis, has been and continues......一起来看看 《Parsing Techniques》 这本书的介绍吧!
