js代码
/*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(provinceN,cityN,districtN){ var all_province=""; for(var i=0;i<allCity.province.length;i++){ all_province+='<option name="province" value='+allCity.province[i].id+'><span class="province">'+allCity.province[i].name+'</span></option>'; }; $('#'+provinceN).append(all_province); $('#'+provinceN).change(function () { var provinceId = $('#'+provinceN).val(); $('#'+cityN).find("option:gt(0)").remove(); $('#'+districtN).find("option:gt(0)").remove(); var all_city=""; if( provinceId!=99999){ for(var j=0;j<allCity.city[provinceId].length;j++){ all_city += '<option name="city" value='+allCity.city[provinceId][j].id+'><span class="city">'+allCity.city[provinceId][j].name+'</span></option>'; } } ; $('#'+cityN).append(all_city); }); $('#'+cityN).change(function () { var cityId = $(this).val(); var all_district=""; for(var k=0;k<allCity.district[cityId].length;k++){ all_district += '<option name="district" value='+allCity.district[cityId][k].id+'><span class="city">'+allCity.district[cityId][k].name+'</span></option>'; } ; $('#'+districtN).append(all_district); }); }
HTML代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>城市三级联动</title> </head> <body> <label>三级联动</label> <div> <select id="allProvince"> <option value="">请选择省份</option> </select> <select id="allCity" > <option value="">请选择城市</option> </select> <select id="allDistrict"> <option value="">请选择区县</option> </select> </div> <script src="http://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script> <script src="allcity.js"></script> <script src="citychange.js"></script> <script> $(function(){cityChange('allProvince','allCity','allDistrict');}) </script> </body> </html>
源码下载地址==》下载