项目笔记：div+ul省区联动

实现div+ui的省区联动，通过调用json串来显示市对应的区

.js

$(function(){
    showProvince();
});
 
function showProvince(){
    var list = eval(json_provice);
    var html = '';
    $.each(list,function(i,item){
        html += ' <li οnclick="showCityOfProvince(\''+item.code+'\')"><a href="javascript:;">'+item.name+'</a></li>'
    });
    $('#provinceDiv').append(html);
}
 
function showCityOfProvince(p_code){
    var city_list = eval(json_city);
    var city_html = '';
    $.each(city_list,function(i,item){
        if(item.code.substr(0,2) == p_code.substr(0,2)){
            city_html += ' <li><a href="#">'+item.name+'</a></li>';
        }
    });
    $('#cityDiv').empty();
    $('#cityDiv').append(city_html);
}

.html

 <div class="province_city">
                  <div class="titleWrap"><h2>所在地区：</h2></div>
                  <ul class="provinceDiv" id="provinceDiv">
                  </ul>
                  <br>
                  <div class="titleWrap"><h2>所在区县：</h2></div>
                  <ul class="cityDiv" id="cityDiv">
                  </ul>

</div>

json

var json_provice =
[
    {"name":"不限", "code":"100000"},
    {"name":"西安市", "code":"110000"},
    {"name":"宝鸡市", "code":"120000"},
    {"name":"铜川市", "code":"130000"},
    {"name":"咸阳市", "code":"140000"},
    {"name":"渭南市", "code":"150000"},
    {"name":"延安市", "code":"160000"},
    {"name":"汉中市", "code":"170000"},
    {"name":"榆林市", "code":"180000"},
    {"name":"安康市", "code":"190000"},
    {"name":"商洛市", "code":"200000"}
]

var json_city =
[
    {"name":"不限", "code":"100100"},
    {"name":"未央区", "code":"110100"},
    {"name":"莲湖区", "code":"110200"},
    {"name":"未央区", "code":"110300"},
    {"name":"新城区", "code":"110400"},
    {"name":"碑林区", "code":"110500"},
    {"name":"雁塔区", "code":"110600"},
    {"name":"灞桥区", "code":"110700"},
    {"name":"阎良区", "code":"110800"},

]