1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.   <title>选择收件人</title>
  6.   <script src="../jquery-1.11.1.min.js" type="text/javascript"></script>
  7.   <script src="friend.js" type="text/javascript"></script>
  8.  </head>
  9.  
  10.  <body>
  11. 	收件人:<input type="text" name="my-name" id="my-name" value="请选择收件人" onclick="pop()" />
  12.            <input type="hidden" name="my-value" id="my-value" />
  13.  
  14.     <!--alert layer-->
  15. 	<div id="choose-box-wrapper">
  16. 	  <div id="choose-box">
  17. 		<div id="choose-box-title">
  18. 			<span>选择好友</span>
  19. 		</div>
  20. 		<div id="choose-a-class">
  21. 		</div>
  22. 		<div>
  23.             <ul id="choose-a-item">
  24.             </ul>
  25. 		</div>
  26. 		<div id="choose-box-bottom">
  27.             <input type="button" onclick="doSelect()" value="确定" />  
  28. 			<input type="button" onclick="hide()" value="关闭" />
  29. 		</div>
  30. 	  </div>
  31. 	</div>
  32.     <!--alert layer-->
  33.  
  34.   <script type="text/javascript">
  35. 	//弹出窗口
  36. 	function pop(){
  37. 		//将窗口居中
  38. 		makeCenter();
  39. 		//初始化分类列表
  40. 		initLayerClass();
  41. 		//默认情况下, 给第一个分类添加choosen样式
  42. 		$('[class-id="1"]').addClass('choosen');
  43. 		//初始化ITEM列表
  44. 		initItemList(1);
  45. 	}
  46.  
  47. 	//隐藏窗口
  48. 	function hide() {
  49. 	    $('#choose-box-wrapper').css("display", "none");
  50. 	}
  51.  
  52.     //获取选择值
  53. 	function doSelect() {
  54. 	    var list = $(".class-item-ck");
  55. 	    var text = "";
  56. 	    var value = "";
  57. 	    list.each(function () {
  58. 	        if ($(this).is(':checked')) {
  59. 	            text += $(this).attr("item-name") + ";";
  60. 	            value += $(this).attr("item-id");
  61. 	        };
  62. 	    });
  63. 	    $('#my-name').val('').val(text);
  64. 	    $('#my-value').val('').val(value);
  65. 	    //关闭弹窗
  66. 	    hide();
  67.     };
  68.  
  69. 	function initLayerClass()
  70. 	{
  71. 		//原先的分类列表清空
  72. 		$('#choose-a-class').html('');
  73. 		for (i = 0; i < itemList.length; i++) {
  74. 		    $('#choose-a-class').append('<a class="class-item" class-id="' + itemList[i].id + '">' + itemList[i].name + '</a>');
  75. 		}
  76. 		//添加分类列表项的click事件
  77. 		$('.class-item').bind('click', function () {
  78. 		    var item = $(this);
  79. 		    var classid = item.attr('class-id');
  80. 		    var choosenItem = item.parent().find('.choosen');
  81. 		    if (choosenItem) {
  82. 		        $(choosenItem).removeClass('choosen');
  83. 		    }
  84. 		    item.addClass('choosen');
  85. 		    //更新列表
  86. 		    initItemList(classid);
  87. 		}
  88. 		);
  89. 	}
  90.  
  91. 	function initItemList(classid)
  92. 	{
  93. 		//原先列表清空
  94. 		$('#choose-a-item').html('');
  95. 		var mitems = itemList[classid - 1].items;
  96. 		for (i = 0; i < mitems.length; i++) {
  97. 		    var html = '<li class="itemli">';
  98. 		    html += '<a class="mdata-item" item-id="' + mitems[i].id + '">' + mitems[i].name + '</a>';
  99. 		    html += '<input type="checkbox" class="class-item-ck" item-id="' + mitems[i].id + '" item-name="' + mitems[i].name + '" />';
  100. 		    html += '</li>';
  101. 		    $('#choose-a-item').append(html);
  102. 		}
  103. 		//添加详细列表项的click事件
  104. 		$('.mdata-item').bind('click', function(){
  105. 				var item=$(this);
  106. 				//更新选择文本框中的值
  107. 				$('#my-name').val(item.text());
  108. 				//关闭弹窗
  109. 				hide();
  110. 			}
  111. 		);
  112. 	}
  113.  
  114. 	function makeCenter()
  115. 	{
  116. 		$('#choose-box-wrapper').css("display","block");
  117. 		$('#choose-box-wrapper').css("position","absolute");
  118. 		$('#choose-box-wrapper').css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) + $(window).scrollTop()) + "px");
  119. 		$('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose-box-wrapper').outerWidth()) / 2) + $(window).scrollLeft()) + "px");
  120. 	}
  121.  
  122.   </script>
  123.  
  124.   <style type="text/css">
  125. 	#choose-box-wrapper{
  126. 		width: 652px;
  127. 		background-color:#000;
  128. 		filter:alpha(opacity=50);
  129. 		background-color: rgba(0, 0, 0, 0.5);
  130. 		padding:10px;
  131. 		border-radius:5px;
  132. 		display:none;
  133. 	}
  134. 	#choose-box{
  135. 		border: 1px solid #005EAC;
  136. 		width:650px;
  137. 		background-color:white;
  138. 	}
  139. 	#choose-box-title{
  140. 		background:#3777BC;
  141. 		color: white;
  142. 		padding: 4px 10px 5px;
  143. 		font-size: 14px;
  144. 		font-weight: 700;
  145. 		margin: 0;
  146. 	}
  147. 	#choose-box-title span{
  148. 		font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
  149. 	}
  150.  
  151. 	#choose-a-class, #choose-a-item{
  152. 		margin:5px 8px 10px 8px;
  153. 		border: 1px solid #C3C3C3;
  154. 	}
  155. 	#choose-a-class a{
  156. 		display:inline-block;
  157. 		height: 18px;
  158. 		line-height: 18px;
  159. 		color:#005EAC;
  160. 		text-decoration: none;
  161. 		font-size: 9pt;
  162. 		font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
  163. 		margin:2px 5px;
  164. 		padding: 5px;
  165. 		text-align: center;
  166. 	}
  167. 	#choose-a-class a:hover{
  168. 		text-decoration: none;
  169. 		cursor:pointer;
  170. 	}
  171. 	#choose-a-class .choosen{
  172. 		background-color: #005EAC;
  173. 		color:white;
  174. 	}
  175.  
  176. 	#choose-a-item{
  177. 		overflow-x: hidden;
  178. 		overflow-y: auto;
  179. 		height: 200px;
  180. 	}
  181. 	#choose-a-item a{
  182. 		height: 18px;
  183. 		line-height: 18px;
  184. 		color:#005EAC;
  185. 		text-decoration: none;
  186. 		font-size: 9pt;
  187. 		font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
  188. 		float: left;
  189. 		padding:2px 5px 2px 5px;
  190. 		margin: 4px;
  191. 		padding-left:10px;
  192. 		background:url(2012072500060712.gif) no-repeat 0 9px;
  193. 	}
  194. 	#choose-a-item a:hover{
  195. 		background-color:#005EAC;
  196. 		color:white;
  197. 		cursor:pointer;
  198. 	}
  199. 	#choose-a-item .itemli{
  200. 	    width:100px;
  201. 	    list-style:none;
  202. 	    float:left;
  203. 	}
  204. 	#choose-a-item .class-item-ck
  205. 	{
  206. 	    margin-top:10px;
  207. 	    display:inline;
  208. 	}
  209.  
  210. 	#choose-box-bottom{
  211. 		background: #F0F5F8;
  212. 		padding: 8px;
  213. 		text-align: right;
  214. 		border-top: 1px solid #CCC;
  215. 		height:40px;
  216. 	}
  217. 	#choose-box-bottom input{
  218. 		vertical-align: middle;
  219. 		text-align: center;
  220. 		background-color:#005EAC;
  221. 		color:white;
  222. 		border-top: 1px solid #B8D4E8;
  223. 		border-left: 1px solid #B8D4E8;
  224. 		border-right: 1px solid #114680;
  225. 		border-bottom: 1px solid #114680;
  226. 		cursor: pointer;
  227. 		width: 60px;
  228. 		height: 25px;
  229. 		margin-top: 6px;
  230. 		margin-right: 6px;
  231. 	}
  232.   </style>
  233.  
  234.  </body>
  235. </html>
  1. var itemList = [
  2. {
  3.     "id": 1,
  4.     "items": [{
  5.         "id": 1001,
  6.         "name": "张三1"
  7.     },
  8.     {
  9.         "id": 1002,
  10.         "name": "李四1"
  11.     },
  12.     {
  13.         "id": 1003,
  14.         "name": "王五1"
  15.     },
  16.     {
  17.         "id": 1004,
  18.         "name": "赵六1"
  19.     },
  20.     {
  21.         "id": 1005,
  22.         "name": "赵七1"
  23.     }],
  24.     "name": "我的同学"
  25. },
  26. {
  27.     "id": 2,
  28.     "items": [{
  29.         "id": 1001,
  30.         "name": "张三2"
  31.     },
  32.     {
  33.         "id": 1002,
  34.         "name": "李四2"
  35.     },
  36.     {
  37.         "id": 1003,
  38.         "name": "王五2"
  39.     },
  40.     {
  41.         "id": 1004,
  42.         "name": "赵六2"
  43.     },
  44.     {
  45.         "id": 1005,
  46.         "name": "赵七2"
  47.     }],
  48.     "name": "我的同事"
  49. }
  50. ]

Jquery实现弹出选择框选择后返回，支持多级分类的更多相关文章

  1. jquery easyui 弹出消息框 (转载) jQuery EasyUI API 中文文档 - 消息框（Messager） http://www.cnblogs.com/hantianwei/archive/2012/03/19/2407113.html

    <html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" ty ...

  2. jquery easyui 弹出消息框

    <html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" ty ...

  3. C# GridView Edit & Delete, 点击Delete的时候弹出确认框

    1. 使用GridView自带属性ShowEditButton和ShowDeleteButton,均设为True  <Columns> ... <asp:CommandField S ...

  4. Android弹出选项框及指示箭头动画选择

     Android弹出选项框及指示箭头动画选择 Android原生的Spinner提供了下拉列表选项框,但在一些流行的APP中,原生的Spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框 ...

  5. Asp.net点击按钮弹出文件夹选择框的实现（网页）

    本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...

  6. 关于winform窗体关闭时弹出提示框，选择否时窗体也关闭的问题

    在窗体中有FormClosing这个事件,这个事件是在窗体关闭时候运行的.如果要取消某个事件的操作,那么就在该事件中写上e.Cancel=true就能取消该事件,也就是不执行该事件.所以,你要在窗体关 ...

  7. 【代码笔记】iOS-点击搜索按钮，或放大镜后都会弹出搜索框

    一, 效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "CLHSearchBar.h ...

  8. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  9. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  10. .net 弹出消息框后，页面样式变乱

    点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 Resp ...

随机推荐

  1. ant安装以及环境变量配置、验证

    (一)安装 ant 下载地址: http://ant.apache.org/     根据自己电脑下载对应版本 下载完成以后,可自行解压到自己常用的盘中,但是要记住解压到哪里了,以便后续的环境变量配置 ...

  2. unix下的文件和目录详解以及操作方法

    前言:unix下一切东西都是文件,一共有7种不同的文件,前一篇博客已经讲解的很清楚了,不懂的可以看看这里.当然,博主知道有些朋友比忙,没时间看,那我就简单点讲讲这7中文件都有哪些吧. 文件类型包括在s ...

  3. 团队作业4——第一次项目冲刺（Alpha版本）2017.4.23

    1.当天站立式会议照片 本次会议为第一次会议 本次会议在5号公寓1楼召开,本次会议内容: ①:做第一天的简单分工 ②:讨论每个人是否对安排的任务有苦难 ③:规定完成时间是在第二天之前 ④:遇到困难,及 ...

  4. GUI（JTabel表格）

    /** * */ package com.niit.javagui; import java.util.Vector; import javax.swing.ImageIcon; import jav ...

  5. 201521123034《Java程序设计》第八周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1) 1.1 实验总结 答:这题是在课堂上 ...

  6. 201521123045 《Java程序设计》第2周学习总结

    ---恢复内容开始--- #1. 本周学习总结 上课讲解了上次的实验题目,对其中题目的一些问题得到了解决.学会了java数组的使用,对如何使用码云上传代码有了更清晰的理解.pta还是有一些问题没有解决 ...

  7. 201521123034《Java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  8. 201521123022 《Java程序设计》 第十二周学习总结

    1. 本周学习总结 2. 书面作业 Q1.将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示 ...

  9. (转载)Oracle12g安装图解与安装过程常见问题注意事项

    首附转载地址:http://jingyan.baidu.com/article/f96699bbab21c0894e3c1bf8.html 首先,点击"setup",建议以管理员身 ...

  10. Maven常见错误以及解决方案【转载】

    常见的Maven错误 当遇到401错误的时候,看看自己当前使用的Maven是集成的还是自己下载的,然后去配置setting.xml文件