实现效果:

js代码:
<script type="text/javascript">
var provinces=[
{id:1,name:"山东省"},
{id:2,name:"河南省"},
{id:3,name:"四川省"},
];
var citys=[
{id:1,provinceId:1,name:"青岛市"},
{id:2,provinceId:1,name:"烟台市"},
{id:3,provinceId:2,name:"郑州市"},
{id:4,provinceId:2,name:"开封市"},
{id:5,provinceId:3,name:"成都市"},
{id:6,provinceId:3,name:"乐山市"},
];
var districts=[
{id:1,cityId:1,name:"市南区"},
{id:2,cityId:1,name:"市北区"},
{id:3,cityId:2,name:"福山区"},
{id:4,cityId:2,name:"莱山区"},
{id:5,cityId:3,name:"二七区"},
{id:6,cityId:3,name:"中原区"},
{id:7,cityId:4,name:"龙亭区"},
{id:8,cityId:4,name:"鼓楼区"},
{id:9,cityId:5,name:"锦江区"},
{id:10,cityId:5,name:"成华区"},
{id:11,cityId:6,name:"市中区"},
{id:12,cityId:6,name:"沙湾区"},
];
function getCity(){
var province=$("#province").val();
$("#city").empty();
$.each(citys,function(k,v){
if(province==v.provinceId){
$("#city").append("<option value='"+v.id+"'>"+v.name+"</option>");
}
})
}
function getDistrict(){
var val=$("#city").val();
$("#district").empty();
$.each(districts,function(k,v){
if(val==v.cityId){
$("#district").append("<option>"+v.name+"</option>");
}
});
}
$(function(){
$.each(provinces,function(k,v){
$("#province").append("<option value='"+v.id+"'>"+v.name+"</option>");
});
getCity();
getDistrict();
$("#province").change(function(){
getCity();
getDistrict();
});
$("#city").change(function(){
getDistrict();
});
});
</script>Html代码:
<select id="province"></select> <select id="city"></select> <select id="district"></select>

0条评论
点击登录参与评论