<!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. Spring上传文件，图片，以及常见的问题

    1. 在工程依赖库下添加文件上传jar包 commons-fileupload-1.2.2.jar commons-io-2.4.jar 2.在springMVC配置文件中配置视图解析multipar ...

  2. python爬虫scrapy框架——人工识别登录知乎倒立文字验证码和数字英文验证码(2)

    操作环境:python3 在上一文中python爬虫scrapy框架--人工识别知乎登录知乎倒立文字验证码和数字英文验证码(1)我们已经介绍了用Requests库来登录知乎,本文如果看不懂可以先看之前 ...

  3. 【Java并发编程】之六：Runnable和Thread实现多线程的区别（含代码）

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17161237 Java中实现多线程有两种方法:继承Thread类.实现Runnable接口 ...

  4. 201521123091 《Java程序设计》第3周学习总结

    Java 第三周总结 第三周的作业. Java 第三周总结 1.本章学习总结 2.Java Q&A 1.代码阅读 2.构造函数有什么用?其编写格式是什么?如果一个类不写构造函数,它有构造函数吗 ...

  5. 201521123028 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 Q1.clone方法 1.1 Object ...

  6. 让你的python程序同时兼容python2和python3

    python邮件列表里有人发表言论说「python3在10内都无法普及」.在我看来这样的观点有些过于悲观,python3和python2虽然不兼容,但他们之间差别并没很多人想像的那么大.你只需要对自己 ...

  7. 201521123019 《Java程序设计》第10周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 只有执 ...

  8. iOS内购 服务端票据验证及漏单引发的思考.

    因业务需要实现了APP内购处理,但在过程中出现了部分不可控的因素,导致部分用户反映有充值不成并漏单的情况. 仔细考虑了几个付费安全上的问题,凡是涉及到付费的问题都很敏感,任何一方出现损失都是不能接受的 ...

  9. JS严格模式

    如何开启严格模式? 在js中,只需要在顶部添加"use strict",即可进入严格模式 在函数中加上"use strict"编辑指示,也可以指定函数在严格模式 ...

  10. C#设计模式之二简单工厂模式（过渡模式）

    一.引言 之所以写这个系列,是了为了自己更好的理解设计模式,也为新手提供一些帮助,我都是用最简单的.最生活化的实例来说明.在上一篇文章中讲解了单例模式,今天就给大家讲一个比较简单的模式--简单工厂模式 ...