index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市选择实现</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<fieldset>
<legend>按级选中省市县/区</legend>
<label for="addr-show02">您选择的是：
<input type="text" id="addr-show02">
</label>
<div id="addr-choice">
<ul id="title-wrap">
<li value="0">省份</li>
<li value="1">城市</li>
<li value="2">县区</li>
</ul>
<div id="show-panel">
<ul id="addr-wrap">
</ul>
</div>
</div>
<button type="button" class="btn met2">确定</button>
</fieldset>
</div>
<!--<script src="city.js"></script>-->
<script src="city.js"></script>
<script src="method.js"></script>
</body>
</html>
method.js
//****************针对第二种方式的具体js实现部分******************//
//****************所使用的数据是city.js******************//
/*根据id获取对象*/
function $(str) {
return document.getElementById(str);
}
var addrShow02 = $('addr-show02'); //最终地址显示框
var titleWrap = $('title-wrap').getElementsByTagName('LI');
var addrWrap = $('addr-wrap'); //省市区显示模块
var btn2 = document.getElementsByClassName('met2')[0]; //确定按钮
var current2 = {
prov: '',
city: '',
country: '',
provVal: '',
cityVal: '',
countryVal: ''
};
/*自动加载省份列表*/
window.onload = showProv2();
function showProv2() {
addrWrap.innerHTML = '';
/*addrShow02.value = '';*/
btn2.disabled = true;
titleWrap[0].className = 'titleSel';
var len = provice.length;
for (var i = 0; i < len; i++) {
var provLi = document.createElement('li');
provLi.innerText = provice[i]['name'];
provLi.index = i;
addrWrap.appendChild(provLi);
}
}
/*************************需要给动态生成的li绑定点击事件********************** */
addrWrap.onclick = function (e) {
var n;
var e = e || window.event;
var target = e.target || e.srcElement;
if (target && target.nodeName == 'LI') {
/*先判断当前显示区域显示的是省市区的那部分*/
for (var z = 0; z < 3; z++) {
if (titleWrap[z].className == 'titleSel')
n = z;
}
/*显示的处理函数*/
switch (n) {
case 0:
showCity2(target.index);
break;
case 1:
showCountry2(target.index);
break;
case 2:
selectCountry(target.index);
break;
default:
showProv2();
}
}
};
/*选择省份之后显示该省下所有城市*/
function showCity2(index) {
addrWrap.innerHTML = '';
current2.prov = index;
current2.provVal = provice[index].name;
titleWrap[0].className = '';
titleWrap[1].className = 'titleSel';
var cityLen = provice[index].city.length;
for (var j = 0; j < cityLen; j++) {
var cityLi = document.createElement('li');
cityLi.innerText = provice[index].city[j].name;
cityLi.index = j;
addrWrap.appendChild(cityLi);
}
}
/*选择城市之后显示该城市下所有县区*/
function showCountry2(index) {
addrWrap.innerHTML = '';
current2.city = index;
current2.cityVal = provice[current2.prov].city[index].name;
titleWrap[1].className = '';
titleWrap[2].className = 'titleSel';
var countryLen = provice[current2.prov].city[index].districtAndCounty.length;
if (countryLen == 0) {
addrShow02.value = current2.provVal + '-' + current2.cityVal;
}
for (var k = 0; k < countryLen; k++) {
var cityLi = document.createElement('li');
cityLi.innerText = provice[current2.prov].city[index].districtAndCounty[k];
cityLi.index = k;
addrWrap.appendChild(cityLi);
}
}
/*选中具体的县区*/
function selectCountry(index) {
btn2.disabled = false;
current2.country = index;
addrWrap.getElementsByTagName('li')[index].style.backgroundColor = '#23B7E5';
current2.countryVal = provice[current2.prov].city[current2.city].districtAndCounty[index];
}
/*点击确定后恢复成初始状态，且将所选地点显示在输入框中*/
btn2.onclick = function () {
addrShow02.value = current2.provVal + ' ' + current2.cityVal + ' ' + current2.countryVal;
addrWrap.getElementsByTagName('li')[current2.country].style.backgroundColor = '';
};
/*分别点击省市区标题的处理函数*/
document.getElementById('title-wrap').onclick = function (e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if (target && target.nodeName == 'LI') {
for (var z = 0; z < 3; z++) {
titleWrap[z].className = '';
}
target.className = 'titleSel';
if (target.value == '0') {
showProv2();
} else if (target.value == '1') {
showCity2(current2.prov);
} else {
showCountry2(current2.city);
}
}
};
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;
}
#addr-choice{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px 0;
margin-bottom: 20px;
}
#title-wrap li,#addr-wrap li{
list-style: none;
display: inline-block;
text-align: center;
cursor: pointer;
}
#title-wrap li{
width:163px;
height: 45px;
line-height: 45px;
margin-bottom: 10px;
}
.titleSel{
border-bottom: 2px solid #23B7E5;
}
#addr-wrap li{
width: 83px;
height: 30px;
border-radius: 4px;
line-height: 30px;
font-size: 14px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
#addr-wrap li:hover{
background-color: #23B7E5;
}
本版专家分：0结帖率 100%
