js實現省市區三級聯動非select下拉框版
在網上搜三級聯動發現都是用option寫的，突發奇想用其他方式寫瞭一個，自我感覺效果還不錯，大傢感興趣的可以看看，不說廢話，大傢看效果
代碼如下，小白寫的有點亂，大傢想看的就看看
1.html代碼
<div class="box">
<section class="province">省</section>
<section class="city">市</section>
<section class="area">區</section>
<div class="si">
</div>
</div>
2.css代碼
<style>
.box{
width: 800px;
height: 50px;
margin: 20px auto;
background-color: rgb(48, 49, 48);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.box section{
display: inline-block;
background-color: rgb(168, 165, 165);
flex-grow: 1;
height: 30px;
margin-right: 10px;
margin-left: 10px;
border-radius: 5px;
line-height: 30px;
padding-left: 10px;
}
.box section:hover{
cursor: pointer;
}
.si{
display: none;
}
.box .all{
display: block;
width: 740px;
background-color: rgb(211, 203, 203);
padding: 20px;
position: absolute;
border-radius: 10px;
top: 57px;
}
.box .all:hover{
cursor: pointer;
}
.box .all span{
display: inline-block;
width: 130px;
height: 30px;
font-size: 13px;
padding-left: 10px;
line-height: 30px;
border-radius: 5px;
margin-left: 10px;
border: 1px solid #000;
background-color: white;
box-sizing: border-box;
margin-top: 10px;
}
</style>
3.js代碼
<script>
// 獲取內容
var data = city_code// 這個是我的數據
// 獲取省市區
var province = document.querySelector(".province")
var city = document.querySelector(".city")
var area = document.querySelector(".area")
// 獲取隱藏div
var si = document.querySelector(".si")
province.addEventListener("mouseover",function(){
si.classList.add("all")
// 選擇省
var html = ""
var all = document.querySelector(".all")
for(var i = 0;i<data.length;i++){
const provinceName = data[i].name
const provinceID = data[i].code
html += `<span id="${provinceID}">${provinceName}</span>`
}
all.innerHTML=html
var spanAll = document.querySelectorAll("span")
for(var j =0;j<spanAll.length;j++){
spanAll[j].addEventListener("click",function(){
province.innerHTML=this.innerText
province.id=this.id
html = ""
// 選擇市
for(var k = 0;k<data.length;k++){
if (data[k].code===province.id) {
var citys = data[k].city
for(var i = 0;i<citys.length;i++){
html +=`<span id="${citys[i].code}">${citys[i].name}</span>`
}
all.innerHTML=html
var spanAll = document.querySelectorAll("span")
for(var j =0;j<spanAll.length;j++){
spanAll[j].addEventListener("click",function(){
city.innerHTML=this.innerText
city.id=this.id
html = ""
//選擇區
for(var k = 0;k<citys.length;k++){
if (citys[k].code===city.id) {
var areas = citys[k].area
for(var i = 0;i<areas.length;i++){
html +=`<span id="${areas[i].code}">${areas[i].name}</span>`
}
all.innerHTML=html
var spanAll = document.querySelectorAll("span")
for(var j =0;j<spanAll.length;j++){
spanAll[j].addEventListener("click",function(){
area.innerHTML=this.innerText
area.id=this.id
si.classList.remove("all")
})
}
break
}
}
})
}
break
}
}
})
}
})
</script>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。