jquery 城市三级联动

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>

源码下载地址==》下载

posted on 2016-10-21 18:08 calamus 阅读(1389) 评论(0) 编辑收藏举报