PC（原生）——省市县三级联动

1、样式展示：

2、html：

<div class="message_li_type">
                            <span class="message_li_type_span">地址</span>
                            <div class="message_type_container address_input">
                                <span class="message_type_container_span province_span"
                                      onclick="ulOnclick(this)">请选择省</span>
                                <i class="down1"></i>
                                <ul class="message_type_ul get_province">
                                    <!--<li onclick="">
                                        <span>选项1</span>
                                    </li>-->
                                </ul>
                            </div>
                            <div class="message_type_container address_input">
                                <span class="message_type_container_span city_span"
                                      onclick="ulOnclick(this)">请选择市</span>
                                <i class="down1"></i>
                                <ul class="message_type_ul gat_city">
                                    <!--<li onclick="">
                                        <span>选项1</span>
                                    </li>-->

                                </ul>
                            </div>
                            <div class="message_type_container address_input">
                                <span class="message_type_container_span country_span"
                                      onclick="ulOnclick(this)">请选择县</span>
                                <i class="down1"></i>
                                <ul class="message_type_ul gat_country">
                                    <!--<li onclick="">
                                        <span>选项1</span>
                                    </li>
                                    -->
                                </ul>
                            </div>
                        </div>

3、 下拉框css：

    /*下拉菜单的展示*/
    .message_li_type {
        /*float: left;*/
        /*width: 320px;*/
        box-sizing: border-box;
        line-height: 40px;
        margin-bottom: 20px;
    }

    .message_li_type_span {
        text-indent: 6px;
        display: inline-block;
        padding-right: 4px;
        width: 100px;
        text-align: right;
    }

    .message_type_ul {
        display: none;
        z-index: 10;
        position: absolute;
        background: #fff;
        margin-left: -4px;
        width: 100%;
        text-indent: 10px;
        box-sizing: border-box;
        box-shadow: 2px 2px 10px 2px #e8e8e8;
        max-height: 400px;
        overflow: auto;

    }

    .message_type_ul li:hover {
        color: #1e7084;
    }

    .message_type_container {
        display: inline-block;
        position: relative;
        width: 598px;
        cursor: pointer;
        margin-left: 6px;
        text-indent: 8px;
        border: 1px solid #e8e8e8;
    }

    .message_type_container_span {
        color: #888;
        display: inline-block;
        width: 100%;
    }

    .message_type_container:hover > .down1 {
        transform: rotate(180deg);
    }

    /*下拉菜单的展示结束*/

 4、监听下拉框点击显隐事件：

由于上面css样式中定义了下拉框为 display：none；所以判断当点击的下拉框如果是none则让其显示，否则隐藏。

//监听点击下拉菜单
    function ulOnclick(that) {
        var $ul = $(that).parent().children('.message_type_ul');
        if ($ul.css("display") == "none") {
            $ul.show();
        } else {
            $ul.hide();
        }
       
    }

5、通过接口分别获取省市县信息：

 //获取省份信息
    function provinceGet() {
        operation.operation_ajax_async("/loca", "get", '', function () {
            // console.log(global_data)
            var data = global_data.data;
            data.map(function (v) {
                // console.log(v)
                $(".get_province").append('<li class="get_location_li" data-id="' + v.location_id + '" data-name="' + v.location_name + '" onclick="liOnclick(this,1)">' +
                    '<span>' + v.location_name + '</span>' +
                    '</li>'
                );
            });

        })
    };

    //获取市信息
    function cityGet(type_id) {
        var obj = {
            location_id: type_id
        }
        operation.operation_ajax_async("/loca", "get", obj, function () {
            // console.log(global_data)
            var data = global_data.data;
            data.map(function (v) {
                // console.log(v)
                $(".gat_city").append('<li class="get_location_li city_li" data-id="' + v.location_id + '" data-name="' + v.location_name + '" onclick="liOnclick(this,2)">' +
                    '<span>' + v.location_name + '</span>' +
                    '</li>'
                );

            });

        })
    };

    //获取县信息
    function countryGet(type_id) {
        var obj = {
            location_id: type_id
        }
        operation.operation_ajax_async("/loca", "get", obj, function () {
            // console.log(global_data)
            var data = global_data.data;
            data.map(function (v) {
                // console.log(v)
                $(".gat_country").append('<li class="get_location_li country_li" data-id="' + v.location_id + '" data-name="' + v.location_name + '" onclick="liOnclick(this,3)">' +
                    '<span>' + v.location_name + '</span>' +
                    '</li>'
                );

            });

        })
    };

 

 6、监听选择下拉框里面的选项事件：

//监听点击选项
    function liOnclick(that, type) {
        var type_name = $(that).attr('data-name');
        var type_id = $(that).attr('data-id');

//监听选项的name值对应其id值   
     
$(that).closest(".message_type_container").find(".message_type_container_span").text(type_name).attr('data-id', type_id);
        if(type==0){
            $(".main_project").hide();
        }

//当type=1则当点击省的下拉框的时候，将市和县的框的值置空，然后将所选省的id传给市。
        if (type == 1) {
            $(".city_li").remove();
            $('.city_span').text("请选择市").attr('data-id', '');
            $(".country_li").remove();
            $(".country_span").text("请输入县").attr("data-id", '');
            cityGet(type_id);
            $(".get_province").hide();
        }

        //与上面if思路相同
        if (type == 2) {
            $(".country_li").remove();
            $(".country_span").text("请输入县").attr("data-id", '');
            countryGet(type_id)
            $(".gat_city").hide();
        }
        if(type == 3){
            $(".gat_country").hide();
        }
    }

 7、下拉框数据回显：

用 text() 属性。

$(".province_span").text(data.province_name);