选择城市、行业弹窗功能模块

首先是一个选择行业城市的选择框

<div class="com-put">
   <i class="iconfont img"></i>
   <input autocomplete="off" id="check_industry" type="text" value="" name="Industry" required="" readonly="" placeholder="请选择企业行业" aria-required="true">
</div>

功能介绍：可以点开弹框，选择城市/行业，选中后弹窗消失，并且给输入框中赋值，并且传回后台一个data数据，再次打开可以看到当前选中的是哪一个，并且有颜色标识和可取消功能，弹窗首屏出来的都是热门城市/行业，所以还有搜索框，功能类似
见图：

css：

/*弹窗内容*/
.select_content_search{
    position: relative;
    border: 1px solid silver;
    border-radius: 8px;
    height: 40px;
    margin-bottom: 20px;
}
#check_content{
    overflow: hidden;
}
#check_content .select_content_search i{
    position: absolute;
    left: 20px;
    top: 5px;
    margin: 0;
}
#check_content .select_content_search input{
    position: absolute;
    left: 10%;
    outline: none;
    border: none;
    height: 40px;
    width: 65%;
}
.select_content_search div{
    height: 40px;
    width: 25%;
    float: right;
    border-radius: 0 8px 8px 0;
    line-height: 40px;
    text-align: center;
}
.show_content_list li{
    float: left;
    margin: 7px;
}
.show_content_list li div,.show_content_checked div{
    position: relative;
    cursor: pointer;
    border-radius: 5px;
    padding-left: 27px;
    padding-right: 27px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #eddec9;
}
.show_content_checked div{
    display: inline-block;
    margin: 7px;
    background-color: #f4f1ee;
}
.show_content_list li .checkbtn{
    background: linear-gradient(to right,#af8f4d,#dac07d,#af8f4d);
    color: white;
}
.select_content_search #citySearch-error{
    display: none;
}
.show_content_checked div span{
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    font-size: 20px;
    top: 4px;
    right: 0px;
}

JS：

        cityIndestrySelect('city');
        cityIndestrySelect('industry');
        function cityIndestrySelect(name) {
            var selectNum1='';
            var data_name;
            var data_str='';
            var data_Chinese='';
            $.ajax({
                type:"get",
                url: ' /api/workplace/Dictionary/getDictionaries?codes='+name,
                dataType:'json',
                success:function(data){
                    data_name=data[name];
                    console.log(data_name)
                    for(var i=0;i<data_name.length;i++){
                        if(data_name[i].IsHotspot==1){
                            data_str+='<li><div class="'+name+'_list" data-'+name+'="'+data_name[i].Code+'">'+data_name[i].Name+'</div></li>';
                        }
                    }
                }
            })
            if(name=='city'){
                data_Chinese='城市';
            }else {
                data_Chinese='行业';
            }

            var checkedboolean=true;
            var ccc =false;
            var $checklist='';
            var $search_input=$(".select_content_search input");
            function alertS() {
                var Szhezhao = document.getElementById('Szhezhao');
                var alertform = document.getElementById('alertS');
                var SalertClose = document.querySelectorAll('.SalertClose');
                Szhezhao.style.display = 'block';
                var height = alertform.offsetHeight;
                alertform.style.marginTop = -(height / 2) + 'px';
                Szhezhao.style.width = document.documentElement.clientWidth + 'px';
                Szhezhao.style.height = document.documentElement.clientHeight + 'px';
                for (var i = 0; i < SalertClose.length; i++) {
                    SalertClose[i].onclick = function() {
                        Szhezhao.style.display = 'none';
                    }
                }
                window.onresize = function() {
                    Szhezhao.style.width = document.documentElement.clientWidth + 'px';
                    Szhezhao.style.height = document.documentElement.clientHeight + 'px';
                }
            }
            $("#check_"+name).click(function () {
                if(selectNum1){
                    $(".show_content_checked").html('<div class="'+name+'_close">'+selectNum1+'<span>×</span></div>');
                }else {
                    $(".show_content_checked").html('');
                }

                $("#alertS>.alertST>span").text("选择所在"+data_Chinese);
                $search_input.attr({name:'citySearch',placeholder:'搜索所在'+data_Chinese});
                $(".show_content_selectT").text('热门'+data_Chinese)

                $search_input.val('');
                $(".show_content_list").html(data_str);
                $(".btnwrap").html('<a href="javascript:void (0)" class="button db_btn_style SalertClose">确认</a>' +
                    '<a href="javascript:void (0)" class="button db_btn_style SalertClose">取消</a>').hide();
                $(".show_content_list li div").each(function () {
                    if($(this).text()==$(".show_content_checked div").text().substr(0,($(".show_content_checked div").text()).length-1)){
                        $(this).addClass("checkbtn");
                    }
                })
                alertS();
                $(".searchBtn").click(function () {
                    var searchstr='';
                    var searchVal=$search_input.val();
                    for(var p=0;p<data_name.length;p++){
                        if (data_name[p].Name.indexOf(searchVal)>=0&&data_name[p].Level==1&&$.trim(searchVal)!==''||data_name[p].Name.indexOf(searchVal)>=0&&data_name[p].IsHotspot==1&&$.trim(searchVal)!==''){
                            searchstr+='<li><div class="'+name+'_list" data-'+name+'="'+data_name[p].Code+'">'+data_name[p].Name+'</div></li>';
                        }
                    }
                    if($.trim(searchVal)!==''){
                        $(".show_content_list").html(searchstr)
                    }
                })

                $(document).on("click",".show_content_list li ."+name+"_list",function () {
                    var val = $(this).text();
                    if (checkedboolean){
                        if (ccc){
                            $checklist.removeClass("checkbtn");
                        }
                        ccc=true;
                        $(this).addClass("checkbtn");
                        selectNum1=val
                        $(".show_content_checked").html('<div class="'+name+'_close">'+val+'<span>×</span></div>');
                        checkedboolean=false;
                        $checklist=$(this);
                    }
                    $("#Szhezhao").hide();
                    $("#check_"+name).val(val).attr('data-'+name,$(this).attr('data-'+name));
                })
                checkedboolean=true;
                $(document).on("click",".show_content_checked ."+name+"_close",function () {
                    $(".show_content_checked").html('');
                    $(".checkbtn").removeClass('checkbtn');
                    $("#check_"+name).val('').attr('data-'+name,'');
                    selectNum1=''
                })
            });
        }