本文介绍了一种基于 JavaScript 实现的省市区三级联动方案，摒弃了传统的 Select 下拉框，采用自定义 HTML 结构与 CSS 样式构建交互界面。通过监听鼠标事件与 DOM 操作，实现了省份、城市、区域的动态切换与展示，代码结构清晰，适合前端开发者参考学习。
非 Select 省市区三级联动实现方案
在网络上搜索三级联动功能时，大多数示例均基于 HTML 的 option 标签实现。受此启发，尝试使用其他 DOM 元素构建该功能，实际效果表现良好。以下为具体实现效果展示。
以下是完整的代码实现。由于示例由初学者编写，代码结构可能略显松散，供有兴趣的读者参考研究。
HTML 结构部分代码如下：
HTML 与 CSS 结构构建
<div class="box">
<section class="province">省</section>
<section class="city">市</section>
<section class="area">区</section>
<div class="si">
</div>
</div>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>JavaScript 逻辑代码如下：
JavaScript 交互逻辑实现
<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>以上内容为本文的全部分享，旨在为读者提供学习参考。若内容对您有帮助，欢迎支持本站。