轻松实现js弹框显示选项
作者：kirsten_z
这篇文章主要为大家详细介绍了js轻松实现弹框显示选项效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
先看看效果：
效果
-点击弹出弹框
-点击复选框，已选div中 显示已选中的选项
-再次点击取消选中状态，已选div中 显示的选中选项取消显示
-点击 已选 div中的 选项x图标，取消显示该选项 ，取消相应复选框选中状态
-点击大类，小类取消选中状态，点击小类，选中大类取消选中状态
-最多3个选项可以被选中
-点击x图标关闭弹框
-点击确定按钮显示选择后的结果
代码块
html片段代码
<div class="one_search clearfix">
<label class="search_label">科室分类：</label>
<div class="search_select">
<input type="hidden" name="cg_str" id="cg_str" @if(Input::has('cg_str')) value="{{Input::get('cg_str')}}" @endif />
<input type="text" name="type" id="type" onClick="getWindowPop()" @if(Input::has('type')) value="{{Input::get('type')}}" @endif/>
</div>
</div>
<!-- 科室类型start -->
<div id="closePopWindow" style="display: none;">
<div class="cover"></div>
<div class="pop_sele_box">
<div class="pop_tab_menu">
<ul id="tagChange">
<li><a href="javascript:void(0);">临床医学</a></li>
<li><a href="javascript:void(0);">辅助科室</a></li>
<li><a href="javascript:void(0);">其他</a></li>
<li class="pop_close"><a class="close" onclick="$('#closePopWindow').fadeOut()"></a></li>
</ul>
<div class="clear"></div>
</div>
<div class="pop_sele_cont_box" >
<!-- 临床医学-S -->
<div class="pop_sele">
<!-- 内科-S -->
<div class="sele_tit_block">
<input class="sele_check" type="checkbox" value="4" parent="1"/>
<label class="sele_tit_txt">内科</label>
<div class="clear"></div>
</div>
@foreach($oLcyx1 as $key=>$val)
<div class="sele_block clearfix">
<input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/>
<label class="sele_txt">{{$val->name}}</label>
<div class="clear"></div>
</div>
@endforeach
<div class="clear"></div>
<!-- 内科-E -->
<!-- 外科-S -->
<div class="sele_tit_block">
<input class="sele_check" type="checkbox" value="5" parent="1"/>
<label class="sele_tit_txt">外科</label>
<div class="clear"></div>
</div>
@foreach($oLcyx2 as $key=>$val)
<div class="sele_block clearfix">
<input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/>
<label class="sele_txt">{{$val->name}}</label>
<div class="clear"></div>
</div>
@endforeach
<div class="clear"></div>
<!-- 外科-E -->
<!-- 其他-S -->
<div class="sele_tit_block">
<input class="sele_check" type="checkbox" value="6" parent="1"/>
<label class="sele_tit_txt">其他</label>
<div class="clear"></div>
</div>
@foreach($oLcyx3 as $key=>$val)
<div class="sele_block clearfix">
<input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/>
<label class="sele_txt">{{$val->name}}</label>
<div class="clear"></div>
</div>
@endforeach
<div class="clear"></div>
<!-- 其他-E -->
</div>
<!-- 临床医学 -E -->
<!-- 辅助科室-S -->
<div class="pop_sele">
<div class="sele_tit_block">
<div class="clear"></div>
</div>
@foreach($oFzks as $key=>$val)
<div class="sele_block clearfix">
<input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/>
<label class="sele_txt">{{$val->name}}</label>
<div class="clear"></div>
</div>
@endforeach
<div class="clear"></div>
</div>
<!-- 辅助科室-E -->
<!-- 医药公司-S -->
<div class="pop_sele">
<div class="sele_tit_block">
<div class="clear"></div>
</div>
@foreach($oYygs as $key=>$val)
<div class="sele_block clearfix">
<input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/>
<label class="sele_txt">{{$val->name}}</label>
<div class="clear"></div>
</div>
@endforeach
<div class="clear"></div>
</div>
<!-- 医药公司-E -->
</div>
<!-- 信息选中后出现的位置-S -->
<div class="pop_btm_box">
<div class="sele_department_block">
<div class="left_block">已选：</div>
<div class="right_block">
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="pop_btn_block">
<input class="pop_btn" type="button" value="确定" onClick="checkReturn();"/>
</div>
</div>
<!-- 信息选中后出现的位置-E -->
<!--信息提示-->
<div class="pop_txt_box" id="msg">最多3个选项</div>
</div>
</div>
<!-- 科室类型end -->
js片段代码
<script>
//定义初始全局变量
var num = 1;//科室类别可选数量
var cg_str = '';//科室类别id字符串
var type = '';//科室类别名字符串
//刷新保持选中状态
$(function(){
var str = $("#cg_str").val();
if(str.length < 1){
return false;
}else{
cg_str = str + '/';
type = $("#type").val() + '+';
}
str = str.split("/");
for(var i = 0; i < str.length; i++){
$("div.pop_sele").find("div").find("input[type='checkbox']").each(function(){
if($(this).val() == str[i]){
$(this).attr("checked", true);
var Val = $(this).val();
var labelVal = $(this).next("label").html().trim();
//放置到已选div 中
var html = '<div class="department_block">'
+ '<div class="left">' + labelVal + '</div>'
+ '<div class="right">'
+ '<a href="javascript:void(0);" onclick="removeSelector(this, ' + Val + ');"></a>'
+ '</div>'
+ '</div>';
$("div.right_block").append(html);
num++;
}
});
}
});
//打开 科室类别选项框
function idNumber(prefix){
var idNum = prefix;
return idNum;
}
function show_hidden(controlMenu,num,prefix){
controlMenu.eq(num).siblings().find('a').removeClass("sele");
controlMenu.eq(num).find('a').addClass("sele");
var content= prefix + num;
$('#'+content).show();
$('#'+content).siblings().hide();
}
function getWindowPop(){
$("ul#tagChange li").find("a").removeClass("sele");
$("ul#tagChange li:first-child a").addClass("sele");
$("div.pop_sele_cont_box").find("div.pop_sele:first-child").show();
$("div.pop_sele_cont_box").find("div.pop_sele:not(:first-child)").hide();
$("div.pop_sele_cont_box div.pop_sele").attr("id",function(){
return idNumber("No")+ $("div.pop_sele_cont_box div.pop_sele").index(this);
});
$('#closePopWindow').show();
}
$("ul#tagChange li:not(:last-child)").click(function(){
var c = $("ul#tagChange li");
var index = c.index(this);
if(index<3){
var p = idNumber("No");
show_hidden(c,index,p);
}
});
//选择科室类别
$("div.pop_sele").find("div").find("input[type='checkbox']").click(function(){
var Val = $(this).val();
var labelVal = $(this).next('label').html().trim();
var parent = $(this).attr("parent");
if($(this).is(":checked")){//选中处理
//处理大小类选项
$("div.pop_sele").find("div").find("input[type='checkbox']:checked").each(function(){
if($(this).val() == parent || $(this).attr("parent") == Val){
$(this).attr("checked", false);
var v = $(this).val();
var lab = $(this).next('label').html().trim();//当前对象标签值
$("div.department_block").find("div.left").each(function(){
if($(this).html().trim() == lab){
var index = $("div.department_block").find("div.left").index(this);
$("div.department_block").eq(index).remove();//移除该已选 选项
//修改科室类别 值
cg_str = cg_str.replace(v + '/', "");
type = type.replace(lab + '+', "");
num--;
}
});
}
});
//判断num值
if(num > 3){
$('#msg').html("最多3个选项");
$('#msg').fadeIn();
setTimeout(function(){$('#msg').fadeOut();},1000);
return false;
}
cg_str += Val + '/';
type += labelVal + '+';
//放置到已选div 中
var html = '<div class="department_block">'
+ '<div class="left">' + labelVal + '</div>'
+ '<div class="right">'
+ '<a href="javascript:void(0);" onclick="removeSelector(this, ' + Val + ');"></a>'
+ '</div>'
+ '</div>';
$("div.right_block").append(html);
num++;
}else{//未选中
$(this).attr("checked", false);
$("div.department_block").find("div.left").each(function(){
if($(this).html().trim() == labelVal){
var index = $("div.department_block").find("div.left").index(this);
$("div.department_block").eq(index).remove();//移除该已选 选项
//修改科室类别 值
cg_str = cg_str.replace(Val + '/', "");
type = type.replace(labelVal + '+', "");
num--;
}
});
}
});
//清除已选 选项
function removeSelector(obj, val){
var index = $("div.department_block").find("div.right").find("a").index(obj);
var labelVal = $(obj).parent().parent().find("div.left").html().trim();
$("div.department_block").eq(index).remove();//移除该已选 选项
//复选框置为未选中
$("div.pop_sele").find("div").find("input[type='checkbox']:checked").each(function(){
if($(this).val() == val){
$(this).attr("checked", false);
}
});
//修改科室类别 值
cg_str = cg_str.replace(val + '/', "");
type = type.replace(labelVal + '+', "");
num--;
}
//关闭科室类别选项框
function checkReturn(){
//将值放入文本框
var cg_ids = cg_str.substring(0,cg_str.length-1);
var type_str = type.substring(0, type.length-1);
$("#cg_str").val(cg_ids);
$("#type").val(type_str);
$('#closePopWindow').fadeOut();
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。