|
来自网络：https://www.sunzhongwei.com/js-provinces-three-level-linkage-selection-component?from=sidebar_new效果图 ![]()
![]()
![]()
![]()
![]()
实现项目结构： ![]()
city.jshttps://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" 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>
<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['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
/*根据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['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];
}
| 
收藏
淘帖
踩
