來自網絡：
https://www.sunzhongwei.com/js-provinces-three-level-linkage-selection-component?from=sidebar_new
效果圖
實現
項目結構：
city.js
https://blog.csdn.net/qq_26416195/article/details/81114888
index.html
<!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/>
<!--省份選擇-->
<select id="prov" οnchange="showCity(this)">
<option>=請選擇省份=</option>
</select>
<!--城市選擇-->
<select id="city" οnchange="showCountry(this)">
<option>=請選擇城市=</option>
</select>
<!--縣區選擇-->
<select id="country" οnchange="selecCountry(this)">
<option>=請選擇縣區=</option>
</select>
<button type="button" class="btn met1" onClick="showAddr()" id="button-show" >確定</button>
</form>
</fieldset>
</div>
<script src="city.js"></script>
<script src="method.js"></script>
</body>
</html>
method.js
/*根據id獲取對象*/
function $(str) {
return document.getElementById(str);
}
var addrShow = $('addr-show');
var btn = document.getElementsByClassName('met1')[0];
var prov = $('prov');
var city = $('city');
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) {
var val = obj.options[obj.selectedIndex].value;
if (val != current.prov) {
current.prov = val;
addrShow.value = '';
btn.disabled = true;
}
//console.log(val);
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];
}
style.css
/*全局樣式*/
* {
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;
}