首先是一个选择行业城市的选择框
<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=''
})
});
}