利用input与ul列表结合实现自定义三级联动

<div class="select">
    <input id="province" name="Province"  placeholder="请选择省" readonly>
    <div class="list">
        <ul id="c1"></ul>
    </div>
</div>
<div class="select">
    <input id="city" name="City" placeholder="请选择市" readonly>
    <div class="list">
        <ul id="c2"></ul>
    </div>
</div>
<div class="select">
    <input id="area" name="Area" placeholder="请选择区" readonly>
    <div class="list">
        <ul id="c3"></ul>
    </div>
</div>

<script src="address.js"> </script>//引入的省市区文件（可到资源下载）
<script type="text/javascript">
    var $li1='';
    var $li2='';
    var $li3='';
    var city;
    var area;
    $.each(provinceList,function (i,val) {
        $li1+="<li obj='"+i+"'>"+val.name+"</li>";
    });
        $("#c1").append($($li1));
    $("#province").click(function(){
        $("#c1").show();
        $("#c2").hide();
        $("#c3").hide();
    });
    $("#city").click(function () {
        $("#c2").show();
        $("#c1").hide();
        $("#c3").hide();
    });
    $("#area").click(function () {
        $("#c3").show();
        // $("#c1").hide();
        // $("#c2").hide();
    });

    $("#c1").on("click","li",function(){
        var i=$(this).attr("obj");
        city= provinceList[i].cityList;
        //取得值
        // alert(city[0].name);
        var text=$(this).text();
        $("#province").val(text);
        $("#c1").hide();
        $("#c2").empty();
        $li2="";
        //添加节点
        $.each(city,function (i,val) {
            $li2+="<li obj='"+i+"'>"+val.name+"</li>";
        });
        $("#c2").append($($li2));
        $("#c2").show()
    });
    $("#c2").on("click","li",function(){
        var i=$(this).attr("obj");
        area=city[i].areaList;
        var text=$(this).text();
        $("#city").val(text);
        $("#c2").hide();
        $("#c3").empty();
        $li3="";
        $.each(area,function(i,val){
            $li3+="<li>"+val+"</li>"
        });
        $("#c3").append($($li3));
        $("#c3").show()
    });
    $("#c3").on("click","li",function(){
       var text=$(this).text();
       $("#area").val(text);
       $("#c3").hide();
    });

</script>

<style>
    .select{
        display: inline-block;
        position: relative;
    }
    input{
        height:30px;
        border-radius: 3px;
        border: solid 1px #000;
        -moz-appearance: none;
        text-align: center;
        cursor:pointer;
    }
    .list{
        position: absolute;
        top:35px;
    }
    #province{
        width:150px;
    }
    #city{
        width:150px;
    }
    #area{
        width:150px;
    }
    textarea{
        margin-top: 20px;
        box-sizing: border-box;
        width:600px;
        resize: none;
        padding: 10px;
    }
    ul{ margin: 0;
        padding: 0;
        list-style: none;
        max-height:200px;
        overflow: auto;
        cursor:pointer;
        background: white;
        display: none;
        border:1px solid #e6e6e8;
    }
    #c1{
        width:150px;
        text-align:center;
    }
    #c1 li{
        margin:5px auto;
    }
    #c2{
        width:150px;
        text-align:center;
    }
    #c2 li{
        margin:5px auto;
    }
    #c3{
        width:150px;
        text-align:center;
    }
    #c3 li{
        margin:5px auto;
    }
</style>

//省市区文件可留言私传