主要編程思想：根據省份索引與城市索引聯動，JS用的是對象編程思想
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>城市聯動</title>
</head>
<body>
<div class="container">
<!-- 上面部分 -->
<div class="citySelect">
<p class="selectName">北京</p>
<i class="icon"></i>
</div>
<!-- 下面下拉菜單部分 -->
<div class="dragArea">
<ul class="province">
</ul>
<ul class="city">
</ul>
</div>
</div>
<script src="./js/index.js"></script>
<script>
selectCity.init();
</script>
</body>
</html>
index.css
*{
margin: 0;
padding: 0;
list-style: none;
}
.container{
width: 300px;
height: 42px;
margin: 100px auto 0px;
}
.container .citySelect{
width: 100%;
height: 100%;
border: 1px solid #00d7c6;
position: relative;
}
.container .citySelect p{
width: 80px;
height: 42px;
font-size: 13px;
line-height: 42px;
margin-left: 18px;
color: #61687c;
cursor: pointer;
}
.container .citySelect i{
display: block;
width: 12px;
height: 12px;
background: url(./img/downArrow.png);
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
left: 90px;
top: 20px;
cursor: pointer;
}
/* 下半部分 */
.container .dragArea{
width: 100%;
height: 300px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
background: #f6f6f8;
display: none;
}
.container .dragArea ul:nth-child(1){
width: 149px;
height: 300px;
float: left;
overflow: scroll;
}
.container .dragArea ul:nth-child(2){
width: 149px;
height: 300px;
float: right;
overflow: scroll;
}
.container .dragArea ul li{
background-color: #fff;
width: 129px;
height: 50px;
padding-left: 20px;
line-height: 50px;
font-size: 13px;
color: #9fa3b0;
cursor: pointer;
}
/* #active{
background: rgb(241, 243, 246);
} */
.container .dragArea ul:nth-child(2) li:hover{
background: rgb(241, 243, 246);
}
.container .dragArea ul::-webkit-scrollbar{
width: 4px;
height: 0px;
}
.container .dragArea ul::-webkit-scrollbar-thumb{
background-color: #d1d4d6;
border-radius: 4px;
}
JS:
var selectCity = {
dragArea: document.getElementsByClassName('dragArea')[0],
provinceBox: document.getElementsByClassName('province')[0],
cityBox: document.getElementsByClassName('city')[0],
selectName: document.getElementsByClassName('selectName')[0],
icon: document.getElementsByClassName('icon')[0],
provinceLi: null,
cityLi: null,
bool: false,
province: ["北京", "上海", "廣東", "江蘇", "浙江", "重慶", "安徽", "福建", "甘肅", "廣西",
"貴州", "海南", "河北", "黑龍江", "河南", "湖北", "湖南", "江西", "吉林", "遼寧", "內蒙古",
"寧夏", "青海", "山東", "山西", "陝西", "四川", "天津", "新疆", "西藏", "雲南", "香港",
"澳門", "臺灣", "海外"],
city: [["東城", "西城", "朝陽", "豐臺", "石景山", "海淀", "門頭溝", "房山", "通州", "順義", "昌平", "大興", "平谷", "懷柔", "密雲", "延慶"],
["崇明", "黃浦", "盧灣", "徐匯", "長寧", "靜安", "普陀", "閘北", "虹口", "楊浦", "閔行", "寶山", "嘉定", "浦東", "金山", "松江", "青浦", "南匯", "奉賢"],
["廣州", "深圳", "珠海", "東莞", "中山", "佛山", "惠州", "河源", "潮州", "江門", "揭陽", "茂名", "梅州", "清遠", "汕頭", "汕尾", "韶關", "順德", "陽江", "雲浮", "湛江", "肇慶"],
["南京", "常熟", "常州", "海門", "淮安", "江都", "江陰", "崑山", "連雲港", "南通", "啓東", "沭陽", "宿遷", "蘇州", "太倉", "泰州", "同裏", "無錫", "徐州", "鹽城", "宜興", "儀徵", "張家港", "鎮江", "周莊"],
["杭州", "安吉", "慈溪", "定海", "奉化", "海鹽", "黃岩", "湖州", "嘉興", "金華", "臨安", "臨海", "麗水", "寧波", "甌海", "平湖", "千島湖", "衢州", "江山", "瑞安", "紹興", "嵊州", "台州", "溫嶺", "溫州", "餘姚", "舟山"],
["萬州", "涪陵", "渝中", "大渡口", "江北", "沙坪壩", "九龍坡", "南岸", "北碚", "萬盛", "雙橋", "渝北", "巴南", "黔江", "長壽", "綦江", "潼南", "銅梁", "大足", "榮昌", "璧山", "梁平", "城口", "豐都", "墊江", "武隆", "忠縣", "開縣", "雲陽", "奉節", "巫山", "巫溪", "石柱", "秀山", "酉陽", "彭水", "江津", "合川", "永川", "南川"],
["合肥", "安慶", "蚌埠", "亳州", "巢湖", "滁州", "阜陽", "貴池", "淮北", "淮南", "黃山", "九華山", "六安", "馬鞍山", "宿州", "銅陵", "屯溪", "蕪湖", "宣城"],
["福州", "廈門", "泉州", "漳州", "龍巖", "南平", "寧德", "莆田", "三明"],
["蘭州", "白銀", "定西", "敦煌", "甘南", "金昌", "酒泉", "臨夏", "平涼", "天水", "武都", "武威", "西峯", "張掖"],
["南寧", "百色", "北海", "桂林", "防城港", "貴港", "河池", "賀州", "柳州", "欽州", "梧州", "玉林"],
["貴陽", "安順", "畢節", "都勻", "凱里", "六盤水", "銅仁", "興義", "玉屏", "遵義"],
["海口", "儋縣", "陵水", "瓊海", "三亞", "通什", "萬寧"],
["石家莊", "保定", "北戴河", "滄州", "承德", "豐潤", "邯鄲", "衡水", "廊坊", "南戴河", "秦皇島", "唐山", "新城", "邢臺", "張家口"],
["哈爾濱", "北安", "大慶", "大興安嶺", "鶴崗", "黑河", "佳木斯", "雞西", "牡丹江", "齊齊哈爾", "七臺河", "雙鴨山", "綏化", "伊春"],
["鄭州", "安陽", "鶴壁", "潢川", "焦作", "濟源", "開封", "漯河", "洛陽", "南陽", "平頂山", "濮陽", "三門峽", "商丘", "新鄉", "信陽", "許昌", "周口", "駐馬店"],
["武漢", "恩施", "鄂州", "黃岡", "黃石", "荊門", "荊州", "潛江", "十堰", "隨州", "武穴", "仙桃", "咸寧", "襄陽", "襄樊", "孝感", "宜昌"],
["長沙", "常德", "郴州", "衡陽", "懷化", "吉首", "婁底", "邵陽", "湘潭", "益陽", "岳陽", "永州", "張家界", "株洲"],
["南昌", "撫州", "贛州", "吉安", "景德鎮", "井岡山", "九江", "廬山", "萍鄉", "上饒", "新餘", "宜春", "鷹潭"],
["長春", "吉林", "白城", "白山", "琿春", "遼源", "梅河", "四平", "松原", "通化", "延吉"],
["瀋陽", "鞍山", "本溪", "朝陽", "大連", "丹東", "撫順", "阜新", "葫蘆島", "錦州", "遼陽", "盤錦", "鐵嶺", "營口"],
["呼和浩特", "阿拉善盟", "包頭", "赤峯", "東勝", "海拉爾", "集寧", "臨河", "通遼", "烏海", "烏蘭浩特", "錫林浩特"],
["銀川", "固源", "石嘴山", "吳忠"],
["西寧", "德令哈", "格爾木", "共和", "海東", "海晏", "瑪沁", "同仁", "玉樹"],
["濟南", "濱州", "兗州", "德州", "東營", "菏澤", "濟寧", "萊蕪", "聊城", "臨沂", "蓬萊", "青島", "曲阜", "日照", "泰安", "濰坊", "威海", "煙臺", "棗莊", "淄博"],
["太原", "長治", "大同", "侯馬", "晉城", "離石", "臨汾", "寧武", "朔州", "沂州", "陽泉", "榆次", "運城"],
["西安", "安康", "寶雞", "漢中", "渭南", "商州", "綏德", "銅川", "咸陽", "延安", "榆林"],
["成都", "巴中", "達川", "德陽", "都江堰", "峨眉山", "涪陵", "廣安", "廣元", "九寨溝", "康定", "樂山", "瀘州", "馬爾康", "綿陽", "眉山", "南充", "內江", "攀枝花", "遂寧", "汶川", "西昌", "雅安", "宜賓", "自貢", "資陽"],
["天津", "和平", "東麗", "河東", "西青", "河西", "津南", "南開", "北辰", "河北", "武清", "紅橋", "塘沽", "漢沽", "大港", "寧河", "靜海", "寶坻", "薊縣"],
["烏魯木齊", "阿克蘇", "阿勒泰", "阿圖什", "博樂", "昌吉", "東山", "哈密", "和田", "喀什", "克拉瑪依", "庫車", "庫爾勒", "奎屯", "石河子", "塔城", "吐魯番", "伊寧"],
["拉薩", "阿里", "昌都", "林芝", "那曲", "日喀則", "山南"],
["昆明", "大理", "保山", "楚雄", "東川", "箇舊", "景洪", "開遠", "臨滄", "麗江", "六庫", "潞西", "曲靖", "思茅", "文山", "西雙版納", "玉溪", "中甸", "昭通"],
["香港", "九龍", "新界"],
["澳門"],
["臺北", "基隆", "臺南", "臺中", "高雄", "屏東", "南投", "雲林", "新竹", "彰化", "苗栗", "嘉義", "花蓮", "桃園", "宜蘭", "臺東", "金門", "馬祖", "澎湖"],
["俄羅斯", "美國", "日本", "英國", "法國", "德國", "澳大利亞", "東南亞", "阿拉伯半島", "非洲", "南美洲"]],
init: function () {
this.showProvince();//初始化省份
this.showCity();//初始化城市
this.clickSelectName();//點擊選擇
},
//初始化省份
showProvince() {
let provinceTemplate = '';
this.province.forEach((item, index) => {
let liTemplate = `<li data-index='${index}' class='liProvince'>${item}</li>`;
provinceTemplate += liTemplate;
})
this.provinceBox.innerHTML = provinceTemplate;
this.provinceLi = Array.prototype.slice.call(this.provinceBox.getElementsByTagName('li'))
this.provinceLi.forEach((item, index) => {
item.addEventListener('mouseenter', this.overFn.bind(this))
})
},
//鼠標進入省份的函數
overFn: function (e) {
let cityId = e.target.dataset.index;//獲取當前的省份索引
this.provinceLi[cityId].style.background = `rgb(241, 243, 246)`;//當前的省份背景顏色
let allSiblings =this.siblings( this.provinceLi[cityId]);//當前身份的兄弟元素
allSiblings.forEach((item,index)=>{
item.style.background = '#fff';//當前身份的兄弟元素的背景顏色爲白色
})
let cityTemplate = '';//城市模板
this.city[cityId].forEach((item, index) => {
let liTemplate = `<li data-city='${item}' class='liProvince'>${item}</li>`;
cityTemplate += liTemplate;
})
this.cityBox.innerHTML = cityTemplate;//渲染城市模板
this.cityLi = Array.prototype.slice.call(this.cityBox.getElementsByTagName('li'));//城市類數組轉爲數組
this.cityLi.forEach((item, index) => {//遍歷所有城市
item.addEventListener('click', this.clickCity.bind(this));//城市點擊事件
})
},
//初始化城市,默認市顯示北京市的地區
showCity() {
let cityTemplate = '';
this.city[0].forEach((item, index) => {
let liTemplate = `<li data-city='${item}' class='liProvince'>${item}</li>`;
cityTemplate += liTemplate;
})
this.cityBox.innerHTML = cityTemplate;
},
//點擊選擇
clickSelectName: function () {
let self = this;
this.selectName.addEventListener('click', function () {//點擊上部分的城市，城市選擇框出來，icon圖標發生變化
if (!self.bool) {
self.dragArea.style.display = 'block';
self.icon.style.background = `url(./img/upArrow.png)`;
self.icon.style.backgroundSize = `100%`;
self.icon.style.backgroundRepeat = `no-repeat`;
self.bool = true;
} else {
self.dragArea.style.display = 'none';
self.icon.style.background = `url(./img/downArrow.png)`;
self.icon.style.backgroundSize = `100%`;
self.icon.style.backgroundRepeat = `no-repeat`;
self.bool = false
}
})
},
//點擊選擇城市
clickCity: function (e) {
this.selectName.innerHTML = e.target.dataset.city;//點擊城市，把當前點擊的城市賦值給上部分的城市
this.dragArea.style.display = 'none';
this.icon.style.background = `url(./img/downArrow.png)`;
this.icon.style.backgroundSize = `100%`;
this.icon.style.backgroundRepeat = `no-repeat`;
console.log(this.bool)
},
//獲取所有兄弟元素
siblings: function (ele) {
var a = []; //保存所有兄弟節點
var p = ele.parentNode.children; //獲取父級的所有子節點
for (var i = 0; i < p.length; i++) { //循環
if (p[i].nodeType == 1 && p[i] != ele) { //如果該節點是元素節點與不是這個節點本身
a.push(p[i]); // 添加到兄弟節點裏
}
}
return a;
}
}
效果：
點擊前：
點擊後：
選擇：
選擇點擊：
