这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 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>
来源: http://www.phperz.com/article/17/0710/331909.html