<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title>选择收件人</title>

  <script src="../jquery-1.11.1.min.js" type="text/javascript"></script>

  <script src="friend.js" type="text/javascript"></script>

 </head>

 <body>

	收件人:<input type="text" name="my-name" id="my-name" value="请选择收件人" onclick="pop()" />

           <input type="hidden" name="my-value" id="my-value" />

    <!--alert layer-->

	<div id="choose-box-wrapper">

	  <div id="choose-box">

		<div id="choose-box-title">

			<span>选择好友</span>

		</div>

		<div id="choose-a-class">

		</div>

		<div>

            <ul id="choose-a-item">

            </ul>

		</div>

		<div id="choose-box-bottom">

            <input type="button" onclick="doSelect()" value="确定" />  

			<input type="button" onclick="hide()" value="关闭" />

		</div>

	  </div>

	</div>

    <!--alert layer-->

  <script type="text/javascript">

	//弹出窗口

	function pop(){

		//将窗口居中

		makeCenter();

		//初始化分类列表

		initLayerClass();

		//默认情况下, 给第一个分类添加choosen样式

		$('[class-id="1"]').addClass('choosen');

		//初始化ITEM列表

		initItemList(1);

	}

	//隐藏窗口

	function hide() {

	    $('#choose-box-wrapper').css("display", "none");

	}

    //获取选择值

	function doSelect() {

	    var list = $(".class-item-ck");

	    var text = "";

	    var value = "";

	    list.each(function () {

	        if ($(this).is(':checked')) {

	            text += $(this).attr("item-name") + ";";

	            value += $(this).attr("item-id");

	        };

	    });

	    $('#my-name').val('').val(text);

	    $('#my-value').val('').val(value);

	    //关闭弹窗

	    hide();

    };

	function initLayerClass()

	{

		//原先的分类列表清空

		$('#choose-a-class').html('');

		for (i = 0; i < itemList.length; i++) {

		    $('#choose-a-class').append('<a class="class-item" class-id="' + itemList[i].id + '">' + itemList[i].name + '</a>');

		}

		//添加分类列表项的click事件

		$('.class-item').bind('click', function () {

		    var item = $(this);

		    var classid = item.attr('class-id');

		    var choosenItem = item.parent().find('.choosen');

		    if (choosenItem) {

		        $(choosenItem).removeClass('choosen');

		    }

		    item.addClass('choosen');

		    //更新列表

		    initItemList(classid);

		}

		);

	}

	function initItemList(classid)

	{

		//原先列表清空

		$('#choose-a-item').html('');

		var mitems = itemList[classid - 1].items;

		for (i = 0; i < mitems.length; i++) {

		    var html = '<li class="itemli">';

		    html += '<a class="mdata-item" item-id="' + mitems[i].id + '">' + mitems[i].name + '</a>';

		    html += '<input type="checkbox" class="class-item-ck" item-id="' + mitems[i].id + '" item-name="' + mitems[i].name + '" />';

		    html += '</li>';

		    $('#choose-a-item').append(html);

		}

		//添加详细列表项的click事件

		$('.mdata-item').bind('click', function(){

				var item=$(this);

				//更新选择文本框中的值

				$('#my-name').val(item.text());

				//关闭弹窗

				hide();

			}

		);

	}

	function makeCenter()

	{

		$('#choose-box-wrapper').css("display","block");

		$('#choose-box-wrapper').css("position","absolute");

		$('#choose-box-wrapper').css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) + $(window).scrollTop()) + "px");

		$('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose-box-wrapper').outerWidth()) / 2) + $(window).scrollLeft()) + "px");

	}

  </script>

  <style type="text/css">

	#choose-box-wrapper{

		width: 652px;

		background-color:#000;

		filter:alpha(opacity=50);

		background-color: rgba(0, 0, 0, 0.5);

		padding:10px;

		border-radius:5px;

		display:none;

	}

	#choose-box{

		border: 1px solid #005EAC;

		width:650px;

		background-color:white;

	}

	#choose-box-title{

		background:#3777BC;

		color: white;

		padding: 4px 10px 5px;

		font-size: 14px;

		font-weight: 700;

		margin: 0;

	}

	#choose-box-title span{

		font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;

	}

	#choose-a-class, #choose-a-item{

		margin:5px 8px 10px 8px;

		border: 1px solid #C3C3C3;

	}

	#choose-a-class a{

		display:inline-block;

		height: 18px;

		line-height: 18px;

		color:#005EAC;

		text-decoration: none;

		font-size: 9pt;

		font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;

		margin:2px 5px;

		padding: 5px;

		text-align: center;

	}

	#choose-a-class a:hover{

		text-decoration: none;

		cursor:pointer;

	}

	#choose-a-class .choosen{

		background-color: #005EAC;

		color:white;

	}

	#choose-a-item{

		overflow-x: hidden;

		overflow-y: auto;

		height: 200px;

	}

	#choose-a-item a{

		height: 18px;

		line-height: 18px;

		color:#005EAC;

		text-decoration: none;

		font-size: 9pt;

		font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;

		float: left;

		padding:2px 5px 2px 5px;

		margin: 4px;

		padding-left:10px;

		background:url(2012072500060712.gif) no-repeat 0 9px;

	}

	#choose-a-item a:hover{

		background-color:#005EAC;

		color:white;

		cursor:pointer;

	}

	#choose-a-item .itemli{

	    width:100px;

	    list-style:none;

	    float:left;

	}

	#choose-a-item .class-item-ck

	{

	    margin-top:10px;

	    display:inline;

	}

	#choose-box-bottom{

		background: #F0F5F8;

		padding: 8px;

		text-align: right;

		border-top: 1px solid #CCC;

		height:40px;

	}

	#choose-box-bottom input{

		vertical-align: middle;

		text-align: center;

		background-color:#005EAC;

		color:white;

		border-top: 1px solid #B8D4E8;

		border-left: 1px solid #B8D4E8;

		border-right: 1px solid #114680;

		border-bottom: 1px solid #114680;

		cursor: pointer;

		width: 60px;

		height: 25px;

		margin-top: 6px;

		margin-right: 6px;

	}

  </style>

 </body>

</html>

var itemList = [

{

    "id": 1,

    "items": [{

        "id": 1001,

        "name": "张三1"

    },

    {

        "id": 1002,

        "name": "李四1"

    },

    {

        "id": 1003,

        "name": "王五1"

    },

    {

        "id": 1004,

        "name": "赵六1"

    },

    {

        "id": 1005,

        "name": "赵七1"

    }],

    "name": "我的同学"

},

{

    "id": 2,

    "items": [{

        "id": 1001,

        "name": "张三2"

    },

    {

        "id": 1002,

        "name": "李四2"

    },

    {

        "id": 1003,

        "name": "王五2"

    },

    {

        "id": 1004,

        "name": "赵六2"

    },

    {

        "id": 1005,

        "name": "赵七2"

    }],

    "name": "我的同事"

}

]

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. SQL Server 2008 开启数据库的远程连接

     转载: 陈萌_1016----有道云笔记 SQL Server 2008默认是不允许远程连接的,如果想要在本地用SSMS连接远程服务器上的SQL Server 2008,远程连接数据库.需要做两个部 ...

  2. java1.8新特性

    转自:http://www.oschina.NET/translate/everything-about-Java-8 建议去看原文,此处转载只是为了记录. 这篇文章是对Java8中即将到来的改进做一 ...

  3. make: Nothing to be done for 'all' 解决方法

    make: Nothing to be done for 'all' 解决方法 1.这句提示是说明你已经编译好了,而且没有对代码进行任何改动. 若想重新编译,可以先删除以前编译产生的目标文件:make ...

  4. 团队作业4--第一次项目冲刺(Alpha版本) 5

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 对前两天完成的功能进行整合 测试完成功能(测试算法是否有bug,界面设计是否人性化,适合用户使用.) 四.困难与问题 在对前两 ...

  5. 201521123092《java程序设计》第五周学习总结

    1.本周学习总结 #1.1 尝试使用思维导图总结有关多态与接口的知识点. 2.书面作业 #1.代码阅读:Child压缩包内源代码##1.1 com.parent包中Child.java文件能否编译通过 ...

  6. 201521123072《java程序设计》第四次总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.11.2 使用常规方法总结其他上课内容 一些小的方法归纳: 通过 instanceof 可以判断父类引用所引用的对象实例的实际类 ...

  7. 201521123030《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 控制可见性的4个访问修饰符 private -- 仅对本类可见 public -- 对所有类 ...

  8. Java课程设计——计算器

    1.团队课程设计博客链接 http://www.cnblogs.com/yuanj/p/7072137.html 2.个人负责模块或任务说明 确定课题并进行任务分工 编写计算器删除,清零,清空,小数点 ...

  9. Intellij idea使用Junit

    之前使用idea做Junit测试的时候,都是一个一个方法来写,然后在方法名@Test这样测试-.. 后来发现eclipse有直接把整个类的方法都可以抽取出来,自动生成Junit测试方法-于是在找Ide ...

  10. 06jQuery-05-事件

    不同的浏览器绑定事件的代码都不太一样,所以我们使用jQuery来写代码的话,可以屏蔽不同浏览器之间的差异. 在jQuery中,可以使用 on 来绑定一个事件,指定事件的名称和对应的处理函数: // 获 ...