<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="script/jquery-3.2.1.js"></script>
<script>
//示例数据可从数据库获得
var datas = {
"北京": ["朝阳", "海淀", "昌平", "丰台"],
"山东": ["青岛", "济南", "烟台"],
"陕西": ["西安", "咸阳", "宝鸡", "延安"],
"河北": ["石家庄", "张家口", "保定"],
"河南": ["驻马店", "开封", "郑州","洛阳"],
};
$(function () {
//创建省的selectProvince
var selectProvince = $("<select id='selectProvince'></select>");
selectProvince.appendTo($("body"));
//遍历集合
$.each(datas, function (key, value) {
//根据数据创建option并追加到select上
var option = $("<option value=" + key + ">" + key + "</option>");
option.appendTo(selectProvince);
});
//为省的selectProvince绑定change事件
selectProvince.change(function () {
var province = $(this).val();
//找到市的信息
var citys = datas[province];
//删除原来市的信息
$("#selectCity").empty();
//添加option
$.each(citys, function (index, item) {
var newCityOption = $("<option>" + item + "</option>");
newCityOption.appendTo($("#selectCity"));
});
});
//创建市的selectCity
var selectCity = $("<select id='selectCity'></select>");
selectCity.appendTo($("body"));
//获取选中的省信息
var pro = $("#selectProvince").val();
//将省名称作为键到集合中获取值
var citys = datas[pro];
//遍历市的数组
$.each(citys, function (index, item) {
var option = $("<option value=" + item + ">" + item + "</option>");
option.appendTo(selectCity);
})
});
</script>
</head>
<body>
</body>
</html>
jQuery简单实现省市二级联动示例
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 平时虽然也有写前端，但是对于一些复杂的功能实现仍是一知半解。这次项目需要实现一个多选下拉菜单，并且该菜单要和...
- 实现效果 完整代码链接：https://pan.baidu.com/s/1nvkSNVV 密码：qsyb 1 创建...
- 原文链接：http://blog.csdn.net/sandkin/article/details/4655940...
- 由于项目的需求，需要一个省市的二级联动，本来已经做好了，最后传值的时候发现绑定不成功。当时就郁闷了。最后发现问题出...
- 今天我们来说一个非常好用的框架PickerView，来完成地址选择器的功能。还是老原则不好用，不推荐。先上个效果图...
