jquery实现城市选择器效果(二级联动)
2013-11-16 13:50
555 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="city.js"></script>
<script>
$(function(){
//城市联动
var province='';
$.each(city,function(index,value){
province+='<option value="' + value.name + '" index="'+index+'"> ' + value.name + '</option>'
});
$('select[name=province]').append(province).change(function () {
//$('select[name=city]').html('');
var option = '';
if ($(this).val() == '') {
option += '<option value="">请选择</option>';
}else{
var index = $(':selected', this).attr('index');
var data = city[index].child;
for (var i = 0; i < data.length; i++) {
option += '<option value="' + data[i] + '">' + data[i] + '</option>';
}
}
$('select[name=city]').html(option);
})
})
</script>
</head>
<body>
<select name='province' >
<option value=''>--请选择--</option>
</select>
<select name='city' >
<option value=''>--请选择--</option>
</select>
</body>
</html>var city = [{"name":"\u5317\u4eac","child":["\u4e1c\u57ce","\u897f\u57ce","\u5d07\u6587","\u5ba3\u6b66","\u671d\u9633","\u77f3\u666f\u5c71","\u6d77\u6dc0","\u95e8\u5934\u6c9f","\u623f\u5c71","\u901a\u5dde","\u987a\u4e49","\u660c\u5e73","\u5927\u5174","\u6000\u67d4","\u5e73\u8c37","\u5bc6\u4e91","\u5ef6\u5e86"]},{"name":"\u5929\u6d25","child":["\u548c\u5e73","\u6cb3\u4e1c","\u6cb3\u897f","\u5357\u5f00","\u6cb3\u5317","\u7ea2\u6865","\u5858\u6cbd","\u6c49\u6cbd","\u5927\u6e2f","\u4e1c\u4e3d","\u897f\u9752","\u6d25\u5357","\u5317\u8fb0","\u6b66\u6e05","\u5b9d\u577b","\u5b81\u6cb3","\u9759\u6d77","\u84df\u53bf"]},{"name":"\u4e0a\u6d77","child":["\u9ec4\u6d66","\u5362\u6e7e","\u5f90\u6c47","\u957f\u5b81","\u9759\u5b89","\u666e\u9640","\u95f8\u5317","\u8679\u53e3","\u6768\u6d66","\u95f5\u884c","\u5b9d\u5c71","\u5609\u5b9a","\u6d66\u4e1c\u65b0","\u91d1\u5c71","\u677e\u6c5f","\u9752\u6d66","\u5357\u6c47","\u5949\u8d24","\u5d07\u660e"]},{"name":"\u91cd\u5e86","child":["\u4e07\u5dde","\u6daa\u9675","\u6e1d\u4e2d","\u5927\u6e21\u53e3","\u6c5f\u5317","\u6c99\u576a\u575d","\u4e5d\u9f99\u5761","\u5357\u5cb8","\u5317\u789a","\u4e07\u76db","\u53cc\u6865","\u6e1d\u5317","\u5df4\u5357","\u9ed4\u6c5f","\u957f\u5bff","\u7da6\u6c5f","\u6f7c\u5357","\u94dc\u6881","\u5927\u8db3","\u8363\u660c","\u74a7\u5c71","\u6881\u5e73","\u57ce\u53e3","\u4e30\u90fd","\u57ab\u6c5f","\u6b66\u9686","\u5fe0\u53bf","\u5f00\u53bf","\u4e91\u9633","\u5949\u8282","\u5deb\u5c71","\u5deb\u6eaa","\u77f3\u67f1","\u79c0\u5c71","\u9149\u9633","\u5f6d\u6c34","\u6c5f\u6d25","\u5408\u5ddd","\u6c38\u5ddd","\u5357\u5ddd"]},{"name":"\u6cb3\u5317","child":["\u4fdd\u5b9a","\u6ca7\u5dde","\u627f\u5fb7","\u5b9a\u5dde","\u9986\u9676","\u90af\u90f8","\u8861\u6c34","\u5eca\u574a","\u79e6\u7687\u5c9b","\u77f3\u5bb6\u5e84","\u5510\u5c71","\u90a2\u53f0","\u5f20\u5bb6\u53e3","\u6b63\u5b9a","\u8d75\u53bf","\u5f20\u5317"]},{"name":"\u6cb3\u5357","child":["\u5b89\u9633","\u957f\u845b","\u9e64\u58c1","\u7126\u4f5c","\u6d4e\u6e90","\u5f00\u5c01","\u6d1b\u9633","\u6f2f\u6cb3","\u660e\u6e2f","\u5357\u9633","\u5e73\u9876\u5c71","\u6fee\u9633","\u5546\u4e18","\u4e09\u95e8\u5ce1","\u65b0\u4e61","\u8bb8\u660c","\u4fe1\u9633","\u79b9\u5dde","\u9122\u9675","\u90d1\u5dde","\u5468\u53e3","\u9a7b\u9a6c\u5e97"]},{"name":"\u9ed1\u9f99\u6c5f","child":["\u5927\u5e86","\u5927\u5174\u5b89\u5cad","\u54c8\u5c14\u6ee8","\u9e64\u5c97","\u9ed1\u6cb3","\u4f73\u6728\u65af","\u9e21\u897f","\u7261\u4e39\u6c5f","\u9f50\u9f50\u54c8\u5c14","\u4e03\u53f0\u6cb3","\u7ee5\u5316","\u53cc\u9e2d\u5c71","\u4f0a\u6625"]},{"name":"\u5409\u6797","child":["\u767d\u57ce","\u767d\u5c71","\u957f\u6625","\u5409\u6797","\u8fbd\u6e90","\u677e\u539f","\u56db\u5e73","\u901a\u5316","\u5ef6\u8fb9"]},{"name":"\u8fbd\u5b81","child":["\u978d\u5c71","\u672c\u6eaa","\u671d\u9633","\u5927\u8fde","\u4e39\u4e1c","\u629a\u987a","\u961c\u65b0","\u846b\u82a6\u5c9b","\u9526\u5dde","\u8fbd\u9633","\u76d8\u9526","\u6c88\u9633","\u94c1\u5cad","\u74e6\u623f\u5e97","\u8425\u53e3"]},{"name":"\u5c71\u4e1c","child":["\u6ee8\u5dde","\u5fb7\u5dde","\u4e1c\u8425","\u83cf\u6cfd","\u6d4e\u5357","\u6d4e\u5b81","\u57a6\u5229","\u4e34\u6c82","\u804a\u57ce","\u83b1\u829c","\u9752\u5c9b","\u65e5\u7167","\u6cf0\u5b89","\u6f4d\u574a","\u5a01\u6d77","\u70df\u53f0","\u6dc4\u535a","\u67a3\u5e84","\u7ae0\u4e18","\u8bf8\u57ce"]},{"name":"\u5185\u8499\u53e4","child":["\u963f\u62c9\u5584\u76df","\u5305\u5934","\u5df4\u5f66\u6dd6\u5c14\u76df","\u8d64\u5cf0","\u9102\u5c14\u591a\u65af","\u547c\u548c\u6d69\u7279","\u547c\u4f26\u8d1d\u5c14","\u6d77\u62c9\u5c14","\u901a\u8fbd","\u4e4c\u6d77","\u4e4c\u5170\u5bdf\u5e03","\u9521\u6797\u90ed\u52d2\u76df","\u5174\u5b89\u76df"]},{"name":"\u6c5f\u82cf","child":["\u5e38\u5dde","\u5927\u4e30","\u6dee\u5b89","\u8fde\u4e91\u6e2f","\u5357\u4eac","\u5357\u901a","\u82cf\u5dde","\u5bbf\u8fc1","\u6cf0\u5dde","\u65e0\u9521","\u5f90\u5dde","\u626c\u5dde","\u76d0\u57ce","\u9547\u6c5f"]},{"name":"\u5b89\u5fbd","child":["\u5b89\u5e86","\u868c\u57e0","\u4eb3\u5dde","\u5de2\u6e56","\u6c60\u5dde","\u6ec1\u5dde","\u961c\u9633","\u5408\u80a5","\u6dee\u5357","\u6dee\u5317","\u9ec4\u5c71","\u548c\u53bf","\u970d\u90b1","\u516d\u5b89","\u9a6c\u978d\u5c71","\u5bbf\u5dde","\u94dc\u9675","\u6850\u57ce","\u829c\u6e56","\u5ba3\u57ce"]},{"name":"\u5c71\u897f","child":["\u957f\u6cbb","\u5927\u540c","\u664b\u57ce","\u664b\u4e2d","\u5415\u6881","\u4e34\u6c7e","\u4e34\u7317","\u6e05\u5f90","\u6714\u5dde","\u592a\u539f","\u5ffb\u5dde","\u8fd0\u57ce","\u9633\u6cc9"]},{"name":"\u9655\u897f","child":["\u5b89\u5eb7","\u5b9d\u9e21","\u6c49\u4e2d","\u5546\u6d1b","\u94dc\u5ddd","\u6e2d\u5357","\u897f\u5b89","\u54b8\u9633","\u5ef6\u5b89","\u6986\u6797"]},{"name":"\u7518\u8083","child":["\u767d\u94f6","\u5b9a\u897f","\u7518\u5357","\u91d1\u660c","\u5609\u5cea\u5173","\u9152\u6cc9","\u5170\u5dde","\u4e34\u590f","\u9647\u5357","\u5e73\u51c9","\u5e86\u9633","\u5929\u6c34","\u6b66\u5a01","\u5f20\u6396"]},{"name":"\u6d59\u6c5f","child":["\u676d\u5dde","\u6e56\u5dde","\u5609\u5174","\u91d1\u534e","\u4e3d\u6c34","\u5b81\u6ce2","\u8862\u5dde","\u7ecd\u5174","\u53f0\u5dde","\u6e29\u5dde","\u4e49\u4e4c","\u821f\u5c71"]},{"name":"\u6c5f\u897f","child":["\u629a\u5dde","\u8d63\u5dde","\u4e5d\u6c5f","\u5409\u5b89","\u666f\u5fb7\u9547","\u5357\u660c","\u840d\u4e61","\u4e0a\u9976","\u65b0\u4f59","\u9e70\u6f6d","\u5b9c\u6625","\u6c38\u65b0"]},{"name":"\u6e56\u5317","child":["\u6069\u65bd","\u9102\u5dde","\u9ec4\u77f3","\u9ec4\u5188","\u8346\u5dde","\u8346\u95e8","\u6f5c\u6c5f","\u5341\u5830","\u795e\u519c\u67b6","\u968f\u5dde","\u5929\u95e8","\u6b66\u6c49","\u8944\u9633","\u5b5d\u611f","\u4ed9\u6843","\u54b8\u5b81","\u5b9c\u660c"]},{"name":"\u6e56\u5357","child":["\u957f\u6c99","\u5e38\u5fb7","\u90f4\u5dde","\u8861\u9633","\u6000\u5316","\u5a04\u5e95","\u90b5\u9633","\u6e58\u6f6d","\u6e58\u897f","\u5cb3\u9633","\u6c38\u5dde","\u76ca\u9633","\u682a\u6d32","\u5f20\u5bb6\u754c"]},{"name":"\u8d35\u5dde","child":["\u5b89\u987a","\u6bd5\u8282","\u8d35\u9633","\u516d\u76d8\u6c34","\u9ed4\u4e1c\u5357","\u9ed4\u5357","\u9ed4\u897f\u5357","\u94dc\u4ec1","\u9075\u4e49"]},{"name":"\u56db\u5ddd","child":["\u963f\u575d","\u5df4\u4e2d","\u6210\u90fd","\u5fb7\u9633","\u8fbe\u5dde","\u5e7f\u5b89","\u5e7f\u5143","\u7518\u5b5c","\u4e50\u5c71","\u6cf8\u5dde","\u51c9\u5c71","\u7ef5\u9633","\u7709\u5c71","\u5185\u6c5f","\u5357\u5145","\u6500\u679d\u82b1","\u9042\u5b81","\u5b9c\u5bbe","\u96c5\u5b89","\u81ea\u8d21","\u8d44\u9633"]},{"name":"\u4e91\u5357","child":["\u4fdd\u5c71","\u695a\u96c4","\u5927\u7406","\u8fea\u5e86","\u5fb7\u5b8f","\u7ea2\u6cb3","\u6606\u660e","\u4e3d\u6c5f","\u4e34\u6ca7","\u6012\u6c5f","\u666e\u6d31","\u66f2\u9756","\u6587\u5c71","\u897f\u53cc\u7248\u7eb3","\u7389\u6eaa","\u662d\u901a"]},{"name":"\u65b0\u7586","child":["\u963f\u514b\u82cf","\u963f\u62c9\u5c14","\u5df4\u97f3\u90ed\u695e","\u535a\u5c14\u5854\u62c9","\u660c\u5409","\u54c8\u5bc6","\u548c\u7530","\u514b\u62c9\u739b\u4f9d","\u5e93\u5c14\u52d2","\u5580\u4ec0","\u514b\u5b5c\u52d2\u82cf","\u77f3\u6cb3\u5b50","\u5410\u9c81\u756a","\u56fe\u6728\u8212\u514b","\u4e4c\u9c81\u6728\u9f50","\u4e94\u5bb6\u6e20","\u4f0a\u7281","\u5854\u57ce","\u963f\u52d2\u6cf0"]},{"name":"\u5b81\u590f","child":["\u56fa\u539f","\u77f3\u5634\u5c71","\u5434\u5fe0","\u94f6\u5ddd","\u4e2d\u536b"]},{"name":"\u9752\u6d77","child":["\u679c\u6d1b","\u9ec4\u5357","\u6d77\u897f","\u6d77\u4e1c","\u6d77\u5317","\u6d77\u5357","\u897f\u5b81","\u7389\u6811"]},{"name":"\u897f\u85cf","child":["\u963f\u91cc","\u660c\u90fd","\u62c9\u8428","\u6797\u829d","\u90a3\u66f2","\u65e5\u5580\u5219","\u5c71\u5357"]},{"name":"\u5e7f\u897f","child":["\u767e\u8272","\u5317\u6d77","\u5d07\u5de6","\u9632\u57ce\u6e2f","\u6842\u6797","\u8d35\u6e2f","\u6cb3\u6c60","\u8d3a\u5dde","\u67f3\u5dde","\u6765\u5bbe","\u5357\u5b81","\u94a6\u5dde","\u68a7\u5dde","\u7389\u6797"]},{"name":"\u5e7f\u4e1c","child":["\u6f6e\u5dde","\u4e1c\u839e","\u4f5b\u5c71","\u5e7f\u5dde","\u60e0\u5dde","\u6cb3\u6e90","\u6c5f\u95e8","\u63ed\u9633","\u8302\u540d","\u6885\u5dde","\u6e05\u8fdc","\u987a\u5fb7","\u6df1\u5733","\u6c55\u5934","\u97f6\u5173","\u6c55\u5c3e","\u53f0\u5c71","\u9633\u6c5f","\u9633\u6625","\u4e91\u6d6e","\u73e0\u6d77","\u4e2d\u5c71","\u6e5b\u6c5f","\u8087\u5e86"]},{"name":"\u798f\u5efa","child":["\u798f\u5dde","\u9f99\u5ca9","\u5b81\u5fb7","\u5357\u5e73","\u8386\u7530","\u6cc9\u5dde","\u4e09\u660e","\u6b66\u5937\u5c71","\u53a6\u95e8","\u6f33\u5dde"]},{"name":"\u6d77\u5357","child":["\u6d77\u53e3","\u4e09\u4e9a","\u4e94\u6307\u5c71"]},{"name":"\u53f0\u6e7e","child":["\u53f0\u5317\u5e02","\u9ad8\u96c4\u5e02","\u57fa\u9686\u5e02","\u53f0\u4e2d\u5e02","\u53f0\u5357\u5e02","\u65b0\u7af9\u5e02","\u5609\u4e49\u5e02","\u65b0\u5317\u5e02","\u5b9c\u5170\u53bf","\u6843\u56ed\u53bf","\u65b0\u7af9\u53bf","\u82d7\u6817\u53bf","\u53f0\u4e2d\u53bf","\u5f70\u5316\u53bf","\u5357\u6295\u53bf","\u4e91\u6797\u53bf","\u5609\u4e49\u53bf","\u53f0\u5357\u53bf","\u9ad8\u96c4\u53bf","\u5c4f\u4e1c\u53bf","\u6f8e\u6e56\u53bf","\u53f0\u4e1c\u53bf","\u82b1\u83b2\u53bf"]},{"name":"\u9999\u6e2f","child":["\u4e2d\u897f\u533a","\u4e1c\u533a","\u4e5d\u9f99\u57ce\u533a","\u89c2\u5858\u533a","\u5357\u533a","\u6df1\u6c34\u57d7\u533a","\u9ec4\u5927\u4ed9\u533a","\u6e7e\u4ed4\u533a","\u6cb9\u5c16\u65fa\u533a","\u79bb\u5c9b\u533a","\u8475\u9752\u533a","\u5317\u533a","\u897f\u8d21\u533a","\u6c99\u7530\u533a","\u5c6f\u95e8\u533a","\u5927\u57d4\u533a","\u8343\u6e7e\u533a","\u5143\u6717\u533a"]},{"name":"\u6fb3\u95e8","child":["\u82b1\u5730\u739b\u5802\u533a","\u5723\u5b89\u591a\u5c3c\u5802\u533a","\u5927\u5802\u533a","\u671b\u5fb7\u5802\u533a","\u98ce\u987a\u5802\u533a","\u6c39\u4ed4","\u8def\u73af"]},{"name":"\u5176\u4ed6","child":["\u4e0d\u9650"]}];
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js使用xml数据载体实现城市省份二级联动效果
- Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
- js的二级联动实现省份城市的选择
- jquery基于layui实现二级联动下拉选择(省份城市选择)
- JS简单实现城市二级联动选择插件的方法
- JQuery实现二级 select框联动选择
- JQuery_实现二级列表联动效果
- JQuery实现的简单城市间二级联动
- 基于jquery实现二级联动效果
- JS简单实现城市二级联动选择插件的方法
- 前台技术--有关二级联动及多城市选择功能实现
- 省份城市实现二级联动效果
- 用户管理的设计_jquery的ajax实现二级联动效果
- 如何实现无刷新的DropdownList联动效果 选择自 gxh973121 的 Blog
- DOM练习3-二级联动菜单(选择省份城市)
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- jquery实现下拉框左右选择的效果
- VUE2 前端实现 静态二级省市联动选择select的示例
- Ajax实现城市二级联动（二）
- Jquery实现城市三级数据联动的实例