首页 > 代码库 > SELECT 三级联动 [转]
SELECT 三级联动 [转]
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=gbk /> 5 <title>selectList</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 .selectList{width:200px;margin:50px auto;} 9 </style>10 <script type="text/javascript" src=http://www.mamicode.com/"jquery1.7.1.js"></script>11 </head>12 <body>13 <div class="selectList">14 <select class="province">15 <option>请选择</option>16 </select>17 <select class="city">18 <option>请选择</option>19 </select>20 <select class="district">21 <option>请选择</option>22 </select>23 </div>24 <div class="selectList">25 <select class="province">26 <option>请选择</option>27 </select>28 <select class="city">29 <option>请选择</option>30 </select>31 <select class="district">32 <option>请选择</option>33 </select>34 </div>35 <script type="text/javascript">36 $(function(){37 $(".selectList").each(function(){38 var url = "area.json";39 var areaJson;40 var temp_html;41 var oProvince = $(this).find(".province");42 var oCity = $(this).find(".city");43 var oDistrict = $(this).find(".district");44 //初始化省45 var province = function(){46 $.each(areaJson,function(i,province){47 temp_html+="<option value=http://www.mamicode.com/‘"+province.p+"‘>"+province.p+"</option>";48 });49 oProvince.html(temp_html);50 city();51 };52 //赋值市53 var city = function(){54 temp_html = ""; 55 var n = oProvince.get(0).selectedIndex;56 $.each(areaJson[n].c,function(i,city){57 temp_html+="<option value=http://www.mamicode.com/‘"+city.ct+"‘>"+city.ct+"</option>";58 });59 oCity.html(temp_html);60 district();61 };62 //赋值县63 var district = function(){64 temp_html = ""; 65 var m = oProvince.get(0).selectedIndex;66 var n = oCity.get(0).selectedIndex;67 if(typeof(areaJson[m].c[n].d) == "undefined"){68 oDistrict.css("display","none");69 }else{70 oDistrict.css("display","inline");71 $.each(areaJson[m].c[n].d,function(i,district){72 temp_html+="<option value=http://www.mamicode.com/‘"+district.dt+"‘>"+district.dt+"</option>";73 });74 oDistrict.html(temp_html);75 };76 };77 //选择省改变市78 oProvince.change(function(){79 city();80 });81 //选择市改变县82 oCity.change(function(){83 district();84 });85 //获取json数据86 $.getJSON(url,function(data){87 areaJson = data;88 province();89 });90 });91 });92 </script>93 </body>94 </html>
SELECT 三级联动 [转]
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。