jquery 城市三级联动

Posted calamus

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 源码下载地址==》下载

以上是关于jquery 城市三级联动的主要内容,如果未能解决你的问题,请参考以下文章

基于查询的插件库 - 轮播/标签页/滚动条/下拉框/对话框/搜索提示/城市三级联动/日历_一组基于jQuery的小部件

三级联动

JS(JQuery) 省市区三级联动下拉选择

JS(JQuery) 省市区三级联动下拉选择

AjaxPHPmysql实现城市的三级联动

城市三级联动 AJAX-原生js封装