js实现省市区三级联动非select下拉框版 js实现省市区三级联动非selec

在网上搜三级联动发现都是用option写的，突发奇想用其他方式写了一个，自我感觉效果还不错，大家感兴趣的可以看看，不说废话，大家看效果

文章图片

文章图片

文章图片

代码如下，小白写的有点乱，大家想看的就看看
1.html代码

省市区

2.css代码

.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; }

3.js代码

【js实现省市区三级联动非select下拉框版】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。