您的位置：首页 > Web前端 > JQuery

省市二级显示jquery

2016-03-25 10:27 597 查看

<!DOCTYPE html>
<html>

<head lang="en">
<meta charset="UTF-8">
<title>省市二级联动、分页</title>
<style></style>
<script src="js/jquery-2.2.2.js"></script>
<script>
var pros=[
{'name':'jiangsu','name_cn':'江苏','cities':['苏州','无锡']},
{'name':'gongdong','name_cn':'广东','cities':['广州','深圳']},
{'name':'henan','name_cn':'河南','cities':['濮阳','安阳']},
{'name':'hebei','name_cn':'河北','cities':['北京','邯郸']},
{'name':'fujian','name_cn':'福建','cities':['泉州','厦门']}
]
$(function(){
for(var i=0;i<pros.length;i++){
//自动加入option
var a=$("<option>");
a.html(pros[i].name_cn);
a.appendTo('#pro');
}
$("#pro").change(function(){
var xz=$("#pro option:selected").index();
var ci= $("#city");
ci.empty();
for(var j=0;j<pros[xz].cities.length;j++){
var b=$("<option>");
b.html(pros[xz].cities[j]);
b.appendTo('#city');
}
});
})

</script>
</head>
<body>
<select name="province" id="pro"></select>
<select name="city" id="city"></select>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 分页

相关文章推荐

新的分享

章节导航