jquery 三级联动，json格式保存省市区

省市区js下载

 

代码

$(document).ready(function() {

    $( " #areaProvince " ).change(function() {
        LoadCity();
        LoadCounty();
    });

    $( " #areaCity " ).change(function() {
        LoadCounty();
    });

        LoadArea( '' ,  '' ,  '' );
});

function LoadArea(prov, city, County) {
    LoadProvince(prov);
    LoadCity(city);
    LoadCounty(County);

}
function LoadProvince(values) {
    $( " #areaProvince " ).empty();
     for  (var id  in  countryAreaData) {

        $( " #areaProvince " ).append( "  <option value=' "   +  id  +   " '> "   +  id  +   " </option> " );

    }
     if  ( typeof (values)  ==   " string " ) {
        $( " #areaProvince option[value= "   +  values  +   " ] " ).attr( " selected " ,  true )

    }
}
function LoadCity(values) {
    $( " #areaCity " ).empty();
    $( " #areaCounty " ).empty();
    var s1  =  $( " #areaProvince option:selected " ).val();
     for  (var id2  in  countryAreaData[s1]) {

        $( " #areaCity " ).append( "  <option value=' "   +  id2  +   " '> "   +  id2  +   " </option> " );
    }
     if  ( typeof (values)  ==   " string " ) {
        $( " #areaCity option[value= "   +  values  +   " ] " ).attr( " selected " ,  true )

    }
}
function LoadCounty(values) {
    $( " #areaCounty " ).empty();
    var str1  =  $( " #areaProvince option:selected " ).val();
    var str2  =  $( " #areaCity option:selected " ).val();

     for  (i  =   0 ; i  <  countryAreaData[str1][str2].length; i ++ ) {
        str  =  countryAreaData[str1][str2][i];

        $( " #areaCounty " ).append( "  <option value=' "   +  str  +   " '> "   +  str  +   " </option> " );

    }
     if  ( typeof (values)  ==   " string " ) {
        $( " #areaCounty option[value= "   +  values  +   " ] " ).attr( " selected " ,  true )

    }
}

 

 

代码

<!-- 选择城市功能      star       -->
< select id = " areaProvince "  name = " areaProvince "  style = " width: 100px " >
     < option value = " 0 " > 省份 </ option >
</ select >
< select id = " areaCity "  name = " areaCity "  style = " width: 120px " >
     < option value = " 0 " > 地级市 </ option >
</ select >
< select id = " areaCounty "  name = " areaCounty "  style = " width: 120px " >
     < option value = " 0 " > 市县 </ option >
</ select >
<!-- 选择城市功能      end       -->

 

 

转载于:https://www.cnblogs.com/di305449473/archive/2010/05/31/1748025.html