使用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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,590评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,808评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,151评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,779评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,773评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,656评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,022评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,678评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,038评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,756评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,411评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,005评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,973评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,053评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,495评论 2赞 343

使用ul li标签自定义select下拉框，支持多层级联动展示

推荐阅读更多精彩内容