轻松实现js弹框显示选项

标签:公司介绍    日期:2018-10-11 10:55    录入:美娱国际平台注册    浏览:

  

[js,弹框]轻松实现js弹框显示选项

  

先看看效果:  

  

  

  

效果  

  

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

  
  -点击大类,小类取消选中状态,点击小类,选中大类取消选中状态  
  -最多3个选项可以被选中  
  -点击x图标关闭弹框  
  -点击确定按钮显示选择后的结果  

  

代码块  

  

html片段代码  

  
  
          
  
  

js片段代码  

  
  
  //定义初始全局变量  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 = '
'  + '
' + labelVal + '
'  + '
'  + ''  + '
'  + '
';  $("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 = '
'  + '
' + labelVal + '
'  + '
'  + ''  + '
'  + '
';  $("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();  }  
  
  

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

  

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
相关文章阅读