使用ul li标签自定义select下拉框，支持多层级联动展示
在处理表单的网页里，原生的select标签可以满足功能，但是现在的产品一般对用户体验及设计要求比较高，比如下拉框后面的箭头翻转自定义，鼠标悬浮点击的颜色要和整体设计风格一致等等，原生select在每个浏览器下展示不一样，无法满足设计稿要求，于是便自己用ul li写了个简单的下拉框，使用了我们常见的省市区三级下拉为例。效果如下：
省市区.gif
主要点：
1.页面使用ul li替代select，上下箭头绝对定位，点击控制方向及下拉列表的展开收缩
2.当点击ul下的li或者空白处时，因切换ul的显示状态，可以用blur事件监听，但是blur只能监听input类型的元素，所有还要给input加上只读readonly属性，但是由于blur事件右键也可以触发，所有便没有采取，这里使用了给body绑定click事件，点击任何区域都收起ul，但是注意阻止事件冒泡哦
3.加载省市区封装了一个函数，通过请求接口返回数据，选取省份的时候修改城市的下拉选项，选择城市的时候修改县区的下拉选项，如果有空选项记得把后面层级清空哦
html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用ul li标签自定义下拉框</title>
</head>
<body>
<div class="wrap">
<dl class="flex">
<dt>省市区</dt>
<dd class="flex">
<div class="select-i">
<span class="input-txt" id="sProvince">所在省</span>
<i class="jt"></i>
<ul class="ul-select un-fold" id="province"></ul>
</div>
<div class="select-i">
<span class="input-txt" id="sCity">所在市</span>
<i class="jt"></i>
<ul class="ul-select un-fold" id="city"></ul>
</div>
<div class="select-i">
<span class="input-txt" id="sArea">所在县/区</span>
<i class="jt"></i>
<ul class="ul-select un-fold" id="area"></ul>
</div>
</dd>
</dl>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</body>
</html>
js代码：
<script>
/**定义加载地区函数*/
var loadArea = function(city,area,fn){
$.ajax({
url:"/getAreaList",
type:"post",
dataType:"json",
async:false,
contentType:"application/x-www-form-urlencoded",
data : {
city : city,
area : area
},
success:function(data){
if(typeof fn == "function"){
fn(data);
}
}
});
}
$(function(){
/**模拟下拉框点击事件*/
$(".select-i .input-txt").on('click', function (event) {
var $this = $(this);
$(".select-i .input-txt").each(function () {
if($this.attr("id") != $(this).attr("id")){
hideUL($(this))
}
})
if($this.next(".jt").hasClass('up')){
$this.next(".jt").removeClass('up').siblings("ul").addClass("un-fold");
}else{
$this.next(".jt").addClass('up').siblings("ul").removeClass("un-fold");
}
/*阻止冒泡*/
event.stopPropagation();
});
/**当下拉框失去焦点时收起下拉框*/
$("body").on("click",function () {
$(".select-i .input-txt").each(function () {
hideUL($(this));
})
})
/**下拉列表展开时点击li的事件*/
$(".select-i").on("click","ul li",function(){
$(this).parent("ul").siblings(".input-txt").text($(this).text());
$(this).parent("ul").siblings(".input-txt").attr("data-value",$(this).attr("data-value"));
hideUL($(this).parent());
});
/**加载省份*/
loadArea("","",function(data){
var html = "";
for (var i = 0; i < data.length; i++) {
html +="<li data-value='"+data[i].area_code+"'>"+ data[i].area_name + "</li>";
}
$("#province").html(html);
});
/**加载城市*/
$("#province").on("click","li",function(){
var province = $(this).attr("data-value");
var sProvince = $("#sProvince").attr("data-value");
if(province != sProvince){
loadArea(province,"",function(data){
var html = "";
for (var i = 0; i < data.length; i++) {
html +="<li data-value='"+data[i].area_code+"'>"+data[i].area_name + "</li>";
}
$("#city").html(html);
});
$("#sCity").text("所在市").attr("data-value",'');
$("#sArea").text("所在县/区");
$("#area").children("li").remove();
}
});
/**加载地区*/
$("#city").on("click","li",function(){
var city = $(this).attr("data-value");
var sCity = $("#sCity").attr("data-value");
if(city != sCity){
loadArea("",city,function(data){
var html = "";
for (var i = 0; i < data.length; i++) {
html +="<li data-value='"+data[i].area_code+"'>"+data[i].area_name + "</li>";
}
$("#area").html(html);
});
$("#sArea").text("所在县/区").attr("data-value",'');
}
});
})
/**隐藏ul*/
function hideUL(obj) {
if(obj.siblings(".jt").hasClass('up')){
obj.siblings(".jt").removeClass('up').siblings("ul").addClass("un-fold");
}
}
</script>
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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。