注意内容
1、这里用到$设置函数，可能会和jQuery产生冲突，换个函数就好。
2、current中的数据保存下来仅是为了在当前案例中显示使用，不用太在意。
实现效果
代码实现
结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市选择三级联动</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<fieldset>
<form action="#">
<label for="addr-show">您选择的是：
<input type="text" value="" id="addr-show">
</label>
<br/>
<!--省份选择-->
<!-- 这里showCity: 省份一开始就初始化了,所以当省份选择好就去加载城市 -->
<select id="prov" onchange="showCity(this)">
<option>=请选择省份=</option>
</select>
<!--城市选择-->
<select id="city" onchange="showCountry(this)">
<option>=请选择城市=</option>
</select>
<!--县区选择-->
<select id="country" onchange="selecCountry(this)">
<option>=请选择县区=</option>
</select>
<button type="button" class="btn met1" onClick="showAddr()" id="button-show" >确定</button>
</form>
</fieldset>
</div>
<!-- city要在method之前，否则会获取不到 -->
<script src="city.js"></script>
<script src="method.js"></script>
</body>
</html>
样式
/*全局样式*/
* {
margin: 0;
padding: 0;
}
fieldset {
width: 500px;
padding: 20px;
margin: 30px;
border: 1px solid #ccc;
}
legend{
font-size: 18px;
font-weight: bold;
}
#addr-show, #addr-show02,#addr-show03{
width: 200px;
height: 25px;
margin-bottom: 10px;
}
.btn {
width: 80px;
height: 30px;
border-radius: 4px;
border: 1px solid #ccc;
outline: none;
background-color: #aaa;
margin: 0 20px;
}
.btn:disabled{
background-color:#ccc;
}
select {
width: 120px;
height: 30px;
}
JS
// 定义函数，表示通过id获取DOM对象
function $(str) {
return document.getElementById(str);
}
// 获取label显示
var addrShow = $('addr-show');
// 获取按钮
var btn = document.getElementsByClassName('met1')[0];
// 获取省份的select
var prov = $('prov');
// 获取城市的select
var city = $('city');
// 获取市区的select
var country = $('country');
/*用于保存当前所选的省市区,方便之后显示*/
var current = {
prov: '',
city: '',
country: ''
};
/*自动加载省份列表*/
(function showProv() {
// 禁用按钮
btn.disabled = true;
var len = provice.length;
// 添加一级----省份
for (var i = 0; i < len; i++) {
var provOpt = document.createElement('option');
provOpt.innerText = provice[i]['name'];
provOpt.value = i;
prov.appendChild(provOpt);
}
})();
/*根据所选的省份来显示城市列表*/
function showCity(obj) {
// 通过检索当前option的索引获取当前option的value值
var val = obj.options[obj.selectedIndex].value;
// 这里表示非第一次选择,这个时候就需要修改预先保留的值
if (val != current.prov) {
current.prov = val;
addrShow.value = '';
btn.disabled = true;
}
// 防止省份未选
if (val != null) {
//清空之前的内容只留第一个默认选项
city.length = 1;
// 获取二级----城市
var cityLen = provice[val]["city"].length;
for (var j = 0; j < cityLen; j++) {
var cityOpt = document.createElement('option');
cityOpt.innerText = provice[val]["city"][j].name;
cityOpt.value = j;
city.appendChild(cityOpt);
}
}
}
/*根据所选的城市来显示县区列表*/
function showCountry(obj) {
var val = obj.options[obj.selectedIndex].value;
current.city = val;
if (val != null) {
country.length = 1;
var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;
// 表示不存在第三级
if (countryLen == 0) {
addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name;
return;
}
for (var n = 0; n < countryLen; n++) {
var countryOpt = document.createElement('option');
countryOpt.innerText = provice[current.prov]["city"][val].districtAndCounty[n];
countryOpt.value = n;
country.appendChild(countryOpt);
}
}
}
/*选择县区之后的处理函数*/
function selecCountry(obj) {
current.country = obj.options[obj.selectedIndex].value;
if ((current.city != null) && (current.country != null)) {
btn.disabled = false;
}
}
/*点击确定按钮显示用户所选的地址*/
function showAddr() {
addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name + '-' + provice[current.prov]["city"][current.city].districtAndCounty[current.country];
}
