Jquery实现弹出选择框选择后返回，支持多级分类
<!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实现弹出选择框选择后返回，支持多级分类的更多相关文章
- 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 ...
- jquery easyui 弹出消息框
<html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" ty ...
- C# GridView Edit & Delete, 点击Delete的时候弹出确认框
1. 使用GridView自带属性ShowEditButton和ShowDeleteButton,均设为True <Columns> ... <asp:CommandField S ...
- Android弹出选项框及指示箭头动画选择
Android弹出选项框及指示箭头动画选择 Android原生的Spinner提供了下拉列表选项框,但在一些流行的APP中,原生的Spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框 ...
- Asp.net点击按钮弹出文件夹选择框的实现（网页）
本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...
- 关于winform窗体关闭时弹出提示框，选择否时窗体也关闭的问题
在窗体中有FormClosing这个事件,这个事件是在窗体关闭时候运行的.如果要取消某个事件的操作,那么就在该事件中写上e.Cancel=true就能取消该事件,也就是不执行该事件.所以,你要在窗体关 ...
- 【代码笔记】iOS-点击搜索按钮，或放大镜后都会弹出搜索框
一, 效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "CLHSearchBar.h ...
- js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
- .net 弹出消息框后，页面样式变乱
点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 Resp ...
随机推荐
- poj 1330 LCA最近公共祖先
今天学LCA,先照一个模板学习代码,给一个离线算法,主要方法是并查集加上递归思想. 再搞,第一个离线算法是比较常用了,基本离线都用这种方法了,复杂度O(n+q).通过递归思想和并查集来寻找最近公共祖先 ...
- Mybatis源码解析-BoundSql
mybatis作为持久层,其操作数据库离不开sql语句.而BoundSql则是其保存Sql语句的对象 前提 针对mybatis的配置文件的节点解析,比如where/if/trim的节点解析可见文章Sp ...
- 基于JZ2440开发板编写bootloader总结（一）
凡走过必留下痕迹,学点什么都会有用的. 本系列博文总结了自己在学习嵌入式Linux编程过程中的收获,若有错误,恳请指正,谢谢! --参考教材韦东山系列教材 bootloader 是一个用于启动linu ...
- 5th-个人总结（Alpha阶段）
一. 总结自己的Alpha过程 1.团队的整体情况 在团队中这次担任队长的职务. alpha阶段完成情况还算理想,大家都完成了指定的任务.但是也少不了犯错,一些需求没有划分的足够细致,后来功能完成后发 ...
- 团队作业8——第二次项目冲刺（Beta阶段）博客汇总
一.冲刺计划安排 http://www.cnblogs.com/teamworkers/p/6875742.html 二.七天冲刺汇总 http://www.cnblogs.com/teamworke ...
- 201521123035《Java程序设计》第七周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代 ...
- 201521123026 《Java程序设计》第5周学习总结
1. 本章学习总结 尝试使用思维导图总结有关多态与接口的知识点 使用常规方法总结其他上课内容 1.接口的出现时为了实现多态,多态的实现不一定依赖于接口. 2.接口的常见成员有:全局常量和抽象方法. 3 ...
- 201521123011 《Java程序设计》 第二周学习总结
1. 本周学习总结 记录本周学习中的重点 原则:少而精,自己写.即使不超过5行也可,但请一定不要简单的复制粘贴. 知道了c语言中string的定义与java不同的地方. 学习了枚举,数组等方法 Tnt ...
- hadoop-2.6.0源码编译问题汇总
在上一篇文章中,介绍了hadoop-2.6.0源码编译的一般流程,因个人计算机环境的不同, 编译过程中难免会出现一些错误,下面是我编译过程中遇到的错误. 列举出来并附上我解决此错误的方法,希望对大家有 ...
- HashMap 学习心得
1.构造 HashMap 底层数据结构线性数组,HashMap有一个静态内部类Entry,Entry有四个属性,key,value,next,hash Entry就是HashMap键值对实现的一个基础 ...