内容简介: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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Math Adventures with Python
Peter Farrell / No Starch Press / 2018-11-13 / GBP 24.99
Learn math by getting creative with code! Use the Python programming language to transform learning high school-level math topics like algebra, geometry, trigonometry, and calculus! In Math Adventu......一起来看看 《Math Adventures with Python》 这本书的介绍吧!