轻松实现js弹框显示选项

137 阅读 0 评论 91 点赞

我是靠谱客的博主称心裙子，最近开发中收集的这篇文章主要介绍轻松实现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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。