在处理表单的网页里，原生的select标签可以满足功能，但是现在的产品一般对用户体验及设计要求比较高，比如下拉框后面的箭头翻转自定义，鼠标悬浮点击的颜色要和整体设计风格一致等等，原生select在每个浏览器下展示不一样，无法满足设计稿要求，于是便自己用ul li写了个简单的下拉框，使用了我们常见的省市区三级下拉为例。效果如下：
省市区.gif
主要点：
1.页面使用ul li替代select，上下箭头绝对定位，点击控制方向及下拉列表的展开收缩
2.当点击ul下的li或者空白处时，因切换ul的显示状态，可以用blur事件监听，但是blur只能监听input类型的元素，所有还要给input加上只读readonly属性，但是由于blur事件右键也可以触发，所有便没有采取，这里使用了给body绑定click事件，点击任何区域都收起ul，但是注意阻止事件冒泡哦
3.加载省市区封装了一个函数，通过请求接口返回数据，选取省份的时候修改城市的下拉选项，选择城市的时候修改县区的下拉选项，如果有空选项记得把后面层级清空哦
html代码：
使用ul li标签自定义下拉框
- 省市区
-
所在省
所在市
所在县/区
js代码：
css代码：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body{
width: 100%;
height: 100%;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
}
dl{
margin: 150px auto;
width: 650px;
}
dl dt{
flex-shrink: 0;
margin-right: 15px;
text-align: right;
font-size: 18px;
color: #282828;
}
dl dd .select-i:not(:last-of-type) {
margin-right: 30px;
}
.select-i{
position: relative;
width: 170px;
}
.select-i .input-txt{
display: inline-block;
padding-left: 20px;
padding-right: 5px;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f7f7f7;
border-radius: 5px;
font-size: 18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
}
.jt{
position: absolute;
width: 12px;
height: 12px;
top:20px;
right: 16px;
border-left: 1px solid #545454;
border-bottom: 1px solid #545454;
transform: rotate(-45deg);
-webkit-transform:rotate(-45deg);
-trident-transform:rotate(-45deg);
-gecko-transform:rotate(-45deg);
pointer-events: none;
}
.jt.up{
border-right: 1px solid #545454;
border-top: 1px solid #545454;
border-left:0 ;
border-bottom: 0;
top:28px;
}
.ul-select{
display: block;
position: absolute;
top:60px;
width: 100%;
box-shadow: 0px 0px 46px 0px
rgba(117, 117, 117, 0.12);
max-height: 320px;
overflow-y: auto;
z-index: 1;
font-size: 0;
}
.ul-select.un-fold{
display: none;
}
.ul-select li:last-child{
border-bottom: none;
}
.ul-select li{
position: relative;
display: inline-block;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #454545;
text-align: center;
background-color: #f4f4f4;
border-bottom: 1px solid #eee;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ul-select li:hover{
color: #fff;
background-color: #457bff;
}
省市区的数据也可直接生成json放在本地，返回模型如下：
var PROVINCE_JSON =
[{
"area_code": "110000",
"area_name": "北京市"
}, {
"area_code": "120000",
"area_name": "天津市"
}, {
"area_code": "130000",
"area_name": "河北省"
}, {
"area_code": "140000",
"area_name": "山西省"
}, {
"area_code": "150000",
"area_name": "内蒙古自治区"
}, {
"area_code": "210000",
"area_name": "辽宁省"
}, {
"area_code": "220000",
"area_name": "吉林省"
}, {
"area_code": "230000",
"area_name": "黑龙江省"
}, {
"area_code": "310000",
"area_name": "上海市"
}, {
"area_code": "320000",
"area_name": "江苏省"
}, {
"area_code": "330000",
"area_name": "浙江省"
}, {
"area_code": "340000",
"area_name": "安徽省"
}, {
"area_code": "350000",
"area_name": "福建省"
}, {
"area_code": "360000",
"area_name": "江西省"
}, {
"area_code": "370000",
"area_name": "山东省"
}, {
"area_code": "410000",
"area_name": "河南省"
}, {
"area_code": "420000",
"area_name": "湖北省"
}, {
"area_code": "430000",
"area_name": "湖南省"
}, {
"area_code": "440000",
"area_name": "广东省"
}, {
"area_code": "450000",
"area_name": "广西壮族自治区"
}, {
"area_code": "460000",
"area_name": "海南省"
}, {
"area_code": "500000",
"area_name": "重庆市"
}, {
"area_code": "510000",
"area_name": "四川省"
}, {
"area_code": "520000",
"area_name": "贵州省"
}, {
"area_code": "530000",
"area_name": "云南省"
}, {
"area_code": "540000",
"area_name": "西藏自治区"
}, {
"area_code": "610000",
"area_name": "陕西省"
}, {
"area_code": "620000",
"area_name": "甘肃省"
}, {
"area_code": "630000",
"area_name": "青海省"
}, {
"area_code": "640000",
"area_name": "宁夏回族自治区"
}, {
"area_code": "650000",
"area_name": "新疆维吾尔自治区"
}, {
"area_code": "710000",
"area_name": "台湾省"
}, {
"area_code": "810000",
"area_name": "香港特别行政区"
}, {
"area_code": "820000",
"area_name": "澳门特别行政区"
}]
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。