实现div+ui的省区联动,通过调用json串来显示市对应的区
.js
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"},
]