轻松实现js弹框显示选项

<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 --> 

<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>