<!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. PHP初入,基础知识点分享（a标签&表格的嵌套&文字的处理）

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  2. css样式实现立方体制作

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 团队作业2——需求分析&原型设计

    Deadline: 2017-4-14 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的三个方面 需求分析 原型设计 编码规范 晚交 - 0分 迟交两周以上 - ...

  4. 控制结构(8) 线性化(linearization)

    // 上一篇:管道(pipeline) // 下一篇:程序计数器(PC) "编程语言不过是一个工具,什么语言都一样","编程语言能改变人的思维,不同的语言会带给你不同的思 ...

  5. linux下修改rm命令防止误删除

    前言:相信很多朋友都遇到过在linux下用rm命令误删除文件的时候,此刻的心中仿佛有无数的羊驼在奔腾.那么怎么防止这种情况发生呢?当然是有方法的,我们可以写一个shell脚本,改变一下rm命令的作用. ...

  6. 在dropwizard中使用feign,使用hystrix

    前言 用惯了spring全家桶之后,试试dropwizard的Hello World也别有一帆风味.为了增强对外访问API的能力,需要引入open feign.这里简单在dropwizard中使用fe ...

  7. 设置文件opendilag、savedilog默认路径和文件类型

    dlgSave1.Filter:='文件.txt|*.txt;|word文件|*.doc,*.docx'; dlgSave1.InitialDir:=GetCurrentDir; //设置为当前路径 ...

  8. 06jQuery-03-选择器查找和过滤

    1.查找 find().parent().prev().next() 通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤. 最 ...

  9. ambari

    http://blog.csdn.net/ggz631047367/article/details/50491616 https://cwiki.apache.org/confluence/displ ...

  10. 框架应用：Mybatis (三) - 关系映射

    你有一张你自己的学生证?(一对一) 你这一年级有多少个学生?(一对多) 班上学生各选了什么课?(多对多) 两张表以上的操作都需要联立多张表,而用SQL语句可以直接联立两张表,用工程语言则需要手动完成这 ...