<!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. Java线程调度—休眠

    线程休眠的方法是Thread.sleep(long millis) 和Thread.sleep(long millis, int nanos) ,均为静态方法,那调用sleep休眠的哪个线程呢?简单说 ...

  2. 解决 SQL 注入的另类方法

    本文是翻译,版权归原作者所有 原文地址(original source):https://bitcoinrevolt.wordpress.com/2016/03/08/solving-the-prob ...

  3. 201521123098 《Java程序设计》 第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 1. 对接口这一定义有了初步的了解: 2. 学习了如何定义实现类和如何实现一些接 ...

  4. 我的Emacs配置文件

    (custom-set-variables ;; custom-set-variables was added by Custom. ;; If you edit it by hand, you co ...

  5. 201521123095 《Java程序设计》第10周学习总结

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

  6. 201521123009 《Java程序设计》第12周学习总结

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

  7. Mybatis映射文件处理特殊字符【转发】

    该博文下的方法就非常好了! http://blog.csdn.net/zheng0518/article/details/10449549

  8. oracle-获取数据库中所有表的注释 comments

    公司dba提供的脚本: set serveroutput on set feedback off spool /tmp/getcomments.out select 'comment on table ...

  9. MyEclipse中Source Folder，package，folder的区别

    1.在eclipse下,package, source folder, folder都是文件夹. 但它们有区别如: 2. package:当你在建立一个package时,它自动建立到source fo ...

  10. Identifying Duplicate Indexes

    本文是在阅读<Troubleshooting SQL Server>->Chapter 5: Missing Indexes->Identifying Duplicate In ...