轻松实现js弹框显示选项

站长资源 2024/11/16 佚名

44 1538 44

相思资源网 Design By www.200059.com

先看看效果：

效果

-点击弹出弹框
-点击复选框，已选div中显示已选中的选项
-再次点击取消选中状态，已选div中显示的选中选项取消显示
-点击已选 div中的选项x图标，取消显示该选项，取消相应复选框选中状态"htmlcode">

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

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

js,弹框

标签：

js,弹框

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“轻松实现js弹框显示选项”

暂无轻松实现js弹框显示选项的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

轻松实现js弹框显示选项

js,弹框

JS实现可编辑的后台管理菜单功能【附demo源码下载】

JS制作图形验证码实现代码

评论“轻松实现js弹框显示选项”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

轻松实现js弹框显示选项

js,弹框

JS实现可编辑的后台管理菜单功能【附demo源码下载】

JS制作图形验证码实现代码

评论“轻松实现js弹框显示选项”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存