js實現省市區三級聯動非select下拉框版
阿新 • • 發佈:2021-09-24
在網上搜三級聯動發現都是用option寫的,突發奇想用其他方式寫了一個,自我感覺效果還不錯,大家感興趣的可以看看,不說廢話,大家看效果
程式碼如下,小白寫的有點亂,大家想看的就看看
1.html程式碼
<div class="box"> <section class="province">省</section> <section class="city">市</section> <section class="area">區</section> <div class="si"> </div> </div>
2.程式碼
<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{ www.cppcns.comdisplay: 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.程式碼
<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(www.cppcns.com){
area.innerHTML=this.innerText
area.id=this.id
si.classList.remove("all")
})
}
break
}
}
})
}
break
}
}
})
}
})
</script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。