一款jQuery点击列表菜单选择添加联系人的效果,点击左侧列表菜单里的任意内容,均会自动添加到右侧的列表队列里,左侧取消选择后右侧列表里面自动删除取消的内容,选择完毕后点击确定,则选择的内容自动存储在输入框里,整体的效果还时不错的,喜欢的童鞋请收下吧。
页面的head部分,需引入2个CSS样式文件和jQuery库,代码如下:
<link type="text/css" rel="stylesheet" href="css/common.css">
<link type="text/css" rel="stylesheet" href="css/select.css">
<script src="js/jquery.min.js"></script>
页面的body部分,一个form表单用来存储选择的列表内容,多个div容器用来显示弹窗的列表菜单,代码如下:
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="tel" name="phone" id="area_btn_y2" onclick="show_lay(2)" lay-verify="phone" autocomplete="off" class="layui-input">
<em>查询人员2</em>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="tel" id="area_btn_y1" onclick="show_lay(1)" name="phone" lay-verify="phone" autocomplete="off" class="layui-input">
<em>查询人员1</em>
</div>
</div>
</form>
<div class="fade_layer"></div>
<div class="detail_layer select_peo">
<div class="title">选择人员</div>
<div class="select_peo_con">
<div class="left">
<div class="areas_list">
<ul class="yiji">
<li class="areas_list_one"><a>委领导</a>
<dl>
<dd><a>领导二级</a>
<dl>
<dd><a>领导三级</a></dd>
<ul class="areas_list_two">
<li><span id="99">张三3</span></li>
<li><span id="100">梁四3</span></li>
<li><span id="101">王王3</span></li>
<li><span id="102">董73</span></li>
<li><span id="103">陈四3</span></li>
<li><span id="104">杨过3</span></li>
</ul>
<dd><a>领导三级2</a>
<dl>
<dd><a>领导四级</a></dd>
<ul class="areas_list_two">
<li><span id="99">张淘32</span></li>
<li><span id="100">梁齐超32</span></li>
<li><span id="101">王得力32</span></li>
<li><span id="102">董亚军32</span></li>
<li><span id="103">陈贝斯32</span></li>
<li><span id="104">杨过32</span></li>
</ul>
</dl>
</dd>
</dl>
</dd>
<dd><a>委领导二级2</a>
<dl>
<dd><a>领导三级</a>
<dl>
<dd><a>领导四级</a></dd>
<ul class="areas_list_two">
<li><span id="99">张三3</span></li>
<li><span id="100">梁四3</span></li>
<li><span id="101">王王3</span></li>
<li><span id="102">董73</span></li>
<li><span id="103">陈四3</span></li>
<li><span id="104">杨过3</span></li>
</ul>
</dl>
</dd>
</dl>
</dd>
<dd><a>委领导二级3</a></dd>
<ul class="areas_list_two">
<li><span id="637">隋志</span></li>
<li><span id="730">杨过</span></li>
<li><span id="731">王泽涛</span></li>
<li><span id="103">陈广</span></li>
<li><span id="104">杨勇</span></li>
<li><span id="637">隋文</span></li>
<li><span id="730">杨治国</span></li>
<li><span id="731">王民</span></li>
</ul>
</dl>
</li>
<li class="areas_list_one"><a>本地领导</a></li>
<ul class="areas_list_two">
<li><span id="105">武华</span></li>
<li><span id="106">李文</span></li>
<li><span id="107">田俊</span></li>
<li><span id="108">陈菲</span></li>
</ul>
<li class="areas_list_one"><a>北京领导</a></li>
<ul class="areas_list_two">
<li><span id="109">田军</span></li>
<li><span id="110">侯涛</span></li>
<li><span id="111">李国</span></li>
<li><span id="112">王诺</span></li>
<li><span id="113">孙婷</span></li>
<li><span id="114">李安健</span></li>
<li><span id="115">王卢欣</span></li>
<li><span id="116">李曹静</span></li>
<li><span id="117">张吴剑</span></li>
<li><span id="118">陈佟庆</span></li>
<li><span id="119">李唐琪</span></li>
</ul>
</ul>
</div>
</div>
<div class="center">
<a id="list_add"><img src="images/addicon.jpg"></a>
</div>
<div class="right">
<ul class="send_to">
</ul>
</div>
<div class="clear"></div>
<div class="bot_btn">
<a onclick="do_add(this)" class="a_con do_add">确定</a><a class="a_con close_btn">取消</a>
</div>
</div>
</div>
页面的底部,设置好选择、取消等的事件响应,代码如下:
<script type="text/javascript">
//点击下拉人员效果
$('.detail_layer').find('.left .areas_list .areas_list_one > a').click(function(){
if($(this).parent().hasClass('on')){
$(this).parent().removeClass('on');
$(this).parent().next('.areas_list_two').css('height','0');
//隐藏下一级目录
$(this).siblings('dl').hide();
//初始化
$(this).siblings('dl').find('dl').hide();
$(this).siblings('dl').find('a').removeClass('on');
//console.log($(this).siblings('dl').find('ul.areas_list_two').length);
$(this).siblings('dl').find('ul.areas_list_two').css('height','0');
}else {
//解绑子级分类点击事件
$(this).siblings('dl').children('dd').children('a').unbind('click');
$(this).parent().addClass('on');
//如果下面还有下一级
if($(this).siblings('dl').length>0){
//显示子类
$(this).siblings('dl').show();
//子级分类点击事件
$(this).siblings('dl').children('dd').children('a').click(function(){
//解绑子级分类点击事件
$(this).siblings('dl').children('dd').children('a').unbind('click');
//切换隐藏
if($(this).hasClass('on')){
$(this).removeClass('on');
$(this).parent().next('.areas_list_two').css('height','0');
//隐藏下一级目录
$(this).siblings('dl').hide();
}else{
$(this).addClass('on');
$(this).parent().next('.areas_list_two').css('height','auto');
//如果还有下一级
if($(this).siblings('dl').length>0){
$(this).siblings('dl').show().css('padding-left','30px');
$(this).siblings('dl').children('dd').children('a').click(function(){
//解绑子级分类点击事件
$(this).siblings('dl').children('dd').children('a').unbind('click');
if($(this).hasClass('on')){
$(this).removeClass('on');
$(this).parent().next('.areas_list_two').css('height','0');
//隐藏下一级目录
$(this).siblings('dl').hide();
}else{
$(this).addClass('on');
$(this).parent().next('.areas_list_two').css('height','auto');
//如果还有下一级
if($(this).siblings('dl').length>0){
$(this).siblings('dl').show().css('padding-left','30px');
$(this).siblings('dl').children('dd').children('a').click(function(){
console.log(1233);
if($(this).hasClass('on')){
$(this).removeClass('on');
$(this).parent().next('.areas_list_two').css('height','0');
//隐藏下一级目录
$(this).siblings('dl').hide();
}else{
$(this).addClass('on');
$(this).parent().next('.areas_list_two').css('height','auto');
}
});
}else{
//console.log($(this).parent().next('.areas_list_two').html());
$(this).parent().next('.areas_list_two').css('height','auto');
}
}
});
}else{
//console.log($(this).parent().next('.areas_list_two').html());
$(this).parent().next('.areas_list_two').css('height','auto');
}
}
});
}else{
$(this).parent().next('.areas_list_two').css('height','auto');
}
}
});
//显示弹窗效果
function show_lay(id) {
// alert(id);
$('.detail_layer').show();
$('.detail_layer').attr('id','y'+id);
$('.fade_layer').fadeIn();
}
//插入元素
$('.detail_layer').find('.areas_list_two li').click(function(){
//对勾切换效果
if(!$(this).find('span').hasClass('hover')){
$(this).find('span').addClass('hover');
}else{
$(this).find('span').removeClass('hover');
}
//获取选中元素html
var val_prev = $(this).find('span').attr('id');
$message_peo = $(this).html();
//获取添加后的数组
var attrid =$(this).parents('.select_peo_con').find('.right ul.send_to li').map(function(){
return $(this).find('span').attr('id');
});
//判断数字是否存在数组里
if( jQuery.inArray(val_prev, attrid) ==-1){
$(this).parents('.select_peo_con').find('.right ul.send_to').append("<li>"+$message_peo +"</li>");
}else{
// alert('已存在列表中');
while ($(this).parents('.select_peo_con').find('.right ul.send_to').find("#" + val_prev).length > 0)
{
$(this).parents('.select_peo_con').find('.right ul.send_to').find("#" + val_prev).parent().remove();
}
}
});
//选择人员插入当前点击的input里面
function do_add(elm){
var id = $(elm).parents('div.detail_layer').attr('id');
var temp='';
var nruid='' ;
var temp1='';
var eid='' ;
$(elm).parents('#'+id).find('ul.send_to li').each(function(i,e){
text = $(e).find('span');
for (var i = 0; i < text.length; i++) {
var val=$(text[i]).html();
if(val!=''){
temp+=val+',';
}
var id = $(text[i]).attr('id');
if(id!=''){
nruid+=id+',' ;
}
};
});
var temps=temp.substring(0,temp.length-1);
$('#area_btn_'+id).val(temps);
$('#nruid_'+id).val(nruid) ;
$('#eid').val(eid) ;
$(elm).parents('.detail_layer').fadeOut();
//清空选择人员
$('.detail_layer .right ul li').remove();
$(elm).parents('.select_peo_con').find('ul.areas_list_two').css('height','0');
$(elm).parents('.select_peo_con').find('.areas_list_one').removeClass('on');
$(elm).parents('.select_peo_con').find('.areas_list_two li span').removeClass('hover');
$('.fade_layer').fadeOut();
};
//取消按钮关闭事件
$('a.close_btn').click(function(){
$(this).parents('.detail_layer').fadeOut();
//清空选择人员
$('.detail_layer .right ul li').remove();
$(this).parents('.select_peo_con').find('ul.areas_list_two').css('height','0');
$(this).parents('.select_peo_con').find('.areas_list_one').removeClass('on');
$(this).parents('.select_peo_con').find('.areas_list_two li span').removeClass('hover');
$('.fade_layer').fadeOut();
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791