轻松实现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>

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

(0)

相关推荐

  • 基于layer.js实现收货地址弹框选择然后返回相应的地址信息

    先给大家展示下效果图: 核心代码如下所示: ('.selectaddress').click(function () {//图一联系方式中的点击事件 top.layer.open({ id: "layer_say_hello", type: 2, title: '请点击选择联系地址', shadeClose: true, shade: 0.8, area: ['300px', '400px'], content: "{:Url('/mobile/user/address_li

  • js实现上下左右弹框划出效果

    效果图: 图(1)初始图 图(2)点击"从右侧划出" 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,

  • Bootstrap和Angularjs配合自制弹框的实例代码

    指令 directive('bsPopup', function ($parse) { return { require: 'ngModel', restrict: 'A', link: function (scope, elem, attrs, ctrl) { scope.$watch(function () { return $parse(ctrl.$modelValue)(scope); }, function (newValue) { if (newValue ==0) { $(elem

  • struts json 类型异常返回到js弹框问题解决办法

    struts json 类型异常返回到js弹框问题解决办法 当struts 框架配置了异常时 例如: <package name="sysCnn" namespace="/" extends="json-default"> <global-results> <result name="error">/WEB-INF/pages/error.jsp</result> <res

  • javascript实现无法关闭的弹框

    大家都见过某网页中的恶意广告,你关闭了又出来了!为何,JS来告诉你 HTML <body> <h3 class="whiteColor">无法关闭的弹框,打不死的小强!</h3> <div id="middleBox"> <a href="javascript:;" class="close_btn" id="closeBtn"><img s

  • js自定义弹框插件的封装

    弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高. 首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,其实弹框就是两个div层

  • 轻松实现js弹框显示选项

    先看看效果: 效果 -点击弹出弹框 -点击复选框,已选div中 显示已选中的选项 -再次点击取消选中状态,已选div中 显示的选中选项取消显示 -点击 已选 div中的 选项x图标,取消显示该选项 ,取消相应复选框选中状态​ -点击大类,小类取消选中状态,点击小类,选中大类取消选中状态 -最多3个选项可以被选中 -点击x图标关闭弹框 -点击确定按钮显示选择后的结果 代码块 html片段代码 <div class="one_search clearfix"> <labe

  • 用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)

    Node.JS是一个控制台程序,如果想要从Node.JS弹出Windows系统提示框的话,有很多方法可以实现.比如借助 electron 或 node-webkit: 在Electron中弹出消息框 Electron与Windows的接口非常完善,可以调用各种Window原生机制,如创建系统托盘图标.打开文件夹选择框等.这里使用dialog,即可弹出系统消息提示框: const { app , BrowserWindow , Menu , Tray , shell , dialog , ipcM

  • js弹出框、对话框、提示框、弹窗实现方法总结(推荐)

    一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息!"); } //弹出一个询问框,有确定和取消按钮 function firm() { //利用对话框返回的值 (true 或者 false) if (confirm("你确定提交吗?")) { aler

  • vue.js中toast用法及使用toast弹框的实例代码

    1.首先引入 import { Toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

  • JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例

    本文实例讲述了JS实现的定时器展示简单秒表.页面弹框及跳转操作.分享给大家供大家参考,具体如下: 定时器展示简单秒表demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • js实现弹框效果

    本文实例为大家分享了js实现弹框效果的具体代码,供大家参考,具体内容如下 js实现弹窗效果 利用display来控制弹窗的现实和隐藏 <!-- 弹出层 --> <div id="popLayer"></div> <!--黑色蒙版 --> <div id="popBox"> <div class="close"> X </div> <div> <!

随机推荐