省市级联案例
- 使用原生JS实现
- 使用JQuery和AJAX实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
<select id="province">
<option>--请选择省份--</option>
</select>
<select id="city">
<option>--请选择城市--</option>
</select>
</body>
<script>
// 省份数据
var provinces= ["广东省","湖南省","广西省"];
// 城市数据,数据是一个二维数组,其每个元素是一个数组
var cities = [["深圳","广州","东莞"],["长沙市","郴州市","湘潭市"],["南宁市","桂林市","柳州市"]];
/*
在页面加载完毕以后读取所有的省份,并且填充到#province中
分析:动态创建option对象,并且设置 <option value="0">广东省</option> 这个value就是它对应的城市数组索引
*/
window.onload = function () {
//1.得到省份这个select对象
let selectProvince = document.getElementById("province");
//遍历省份这个数组
for (let i = 0; i < provinces.length; i++) {
let province = provinces[i]; //i=0 province=广东省
//2.创建option对象
let optionElement = document.createElement("option");
//3.设置value和文本
optionElement.value = i;
optionElement.innerText = province;
//4.添加到select的最后一个子元素
selectProvince.appendChild(optionElement);
}
}
/**
* 省份下拉列表的改变事件
*/
document.getElementById("province").onchange = function () {
//value就是它的索引
let arr = cities[this.value]; //得到相应城市的数组
//得到城市下拉select对象
let city = document.getElementById("city"); //city下拉列表对象
//修改city中innerHTML
city.innerHTML = "<option>--请选择城市--</option>"; //覆盖原来的下拉列表子元素
//向城市下拉列表添加option
//1. 遍历城市数组
for (let i = 0; i < arr.length; i++) {
let arrElement = arr[i]; //每个城市字符串
//2. 创建option对象
let optionElement = document.createElement("option");
//3. 设置文本
optionElement.innerText = arrElement;
//4. 添加到select的最后一个子元素
city.appendChild(optionElement);
}
}
/* //jQuery + AJAX 修改后版本:
$(function () {
//添加一级下拉列表
$.get("json/province.json",
function (data) {
$(data).each(function (i, e) {
$("#province").append(`<option value='${e}'>${e}</option>`);
})
});
//绑定一级下拉列表的改变事件
$("#province").change(function () {
//移除之前加载的下拉列表(也可通过html()方法覆盖)
$("#city option:gt(0)").remove();
//获取当前选中的一级下拉列表的值
let province = $("#province option:selected").val();
//添加二级下拉列表
$.get("json/city.json",
function (data) {
let citys = data[province];//json对象类型,通过变量名获取其属性
$.each(citys, function (i, e) {
$("#city").append("<option>" + e + "</option>");
})
})
})
});*/
</script>
</html>