jQuery 城市联动

html

<div class="input-city">
    <input type="text" class="asdCity" id="asdCity" placeholder="选择省/市/区">
    <div class="city-pop">
        <img src="up.png" alt="">
    </div>
</div>

图片

up.png

js

 City(".city-pop");

css文件

.input-city{
    height: 50px;
    width: 100%;
    margin-bottom: 14px;
    position: relative;
}
.input-city input{
    height: 50px;
    width: 100%;
    border: 1px solid rgb( 225, 225, 225 );
    padding: 0 15px;
    font-size: 14px;
    box-sizing: border-box;
}
.city-pop {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.city-pop img {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.cityBox{
    width: 100%;
    height: auto;
    min-height: 170px;
    background: #fff;
    border: 1px solid rgb( 251, 206, 11 );
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 0 13px;
}
.cityBox p {
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    color: rgb( 251, 206, 11 );
    padding: 0 7px;
    margin: 0;
}
.city-btn{
    display: inline-block;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    padding: 0 7px;
    box-sizing: border-box;
    cursor: pointer;
}

js文件

function City(obj) {
    console.log(obj)
    var dom;
    dom = "<div class='cityBox'>\n" +
        "<p>选择省份/自治区</p>\n" +
        "<div class='city-ul'>\n" +
        "<div class='city-li province active'></div>\n" +
        "<div class='city-li city '></div>\n" +
        "<div class='city-li district'></div>\n" +
        "</div>\n" +
        "</div>";
    var cityVal;//已选择内容
    var dataId;//获取上级id
    var pHtml,cHtml,dHtml;//省、市、区/县
    $(document).on('click', obj, function() {
        if($(obj).parent().children(".cityBox").length<=0){
            $(obj).parent().append(dom);
                for (var i =0 ;i<ChineseDistricts[86].length; i++){
                    $(".province").append("<span class='city-btn' data-id="+ChineseDistricts[86][i].code+">"+ChineseDistricts[86][i].address+"</span>");
                }
                // $(".province").show();

        }else {
            $(".cityBox").remove();//清除，防止重复写入
        }
    });
    $(document).on('click', '.city-btn', function() {
        dataId = $(this).attr("data-id");
    });
    $(document).on('click', '.province .city-btn', function() {
        for (var key in ChineseDistricts[dataId]) {
            $(".city").append("<span class='city-btn' data-id="+key+">"+ChineseDistricts[dataId][key]+"</span>");
        }
        $(".province").hide();//隐藏当前
        pHtml = $(this).html();
        $("#asdCity").val(pHtml);
    });
    $(document).on('click', '.city .city-btn', function() {
        for (var key in ChineseDistricts[dataId]) {
            $(".district").append("<span class='city-btn' data-id="+key+">"+ChineseDistricts[dataId][key]+"</span>");
        }
        $(".city").hide();//隐藏当前
        cHtml = $(this).html();
        cityVal = $("#asdCity").val();
        $("#asdCity").val(cityVal+"/"+cHtml);
    });
    $(document).on('click', '.district .city-btn', function() {
        $(".cityBox").remove();//清除
        dHtml = $(this).html();
        cityVal = $("#asdCity").val();
        $("#asdCity").val(cityVal+"/"+dHtml);
    });
}