首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

轻松实现js弹框显示选项

Posted in Javascript onSeptember 13, 2016

先看看效果：

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

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

轻松实现js弹框显示选项

- Author -

kirsten_z

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
js 操作select相关方法函数
Dec 06 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
纯JS实现轮播图
Feb 22 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
JS制作图形验证码实现代码
Oct 19 #Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 #Javascript
javascript数组遍历的方法实例分析
Sep 13 #Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 #Javascript
JS简单去除数组中重复项的方法
Sep 13 #Javascript
jQuery包裹节点用法完整示例
Sep 13 #Javascript
jQuery查找节点方法完整实例
Sep 13 #Javascript
数据加密(1) 公共键(1) 遍历文件夹(1) key(1) python-pcl(1) pycryto(1) Anaconda(2) 历史记录(1) html标准库(1) 有序排列(1)
You might like
PHP4中实现动态代理
2006/10/09 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
python在不同层级目录import模块的方法
2016/01/31 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python实现数据库跨服务器迁移
2018/04/12 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
彪马土耳其官网：PUMA土耳其
2019/07/14 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
大学生新闻专业个人自我评价
2013/11/12 职场文书
家长评语大全
2014/01/22 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
迟到检讨书500字
2014/02/05 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
食品安全工作实施方案
2014/03/26 职场文书
春风行动实施方案
2014/03/28 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书