自己用ul模拟实现下拉多选框，
模拟实现下拉多选框
效果如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../js/plugins/layui/css/layui.css"/>
<!-- 字体图标 -->
<link rel="stylesheet" href="../assets/styles/style.css">
<style>
.main{
padding: 100px;
height: 500px;
background-color: #fff;
}
.content{
width: 400px;
}
.duoxuan{
height: 30px;
line-height: 30px;
padding: 0 20px 0 14px;
width: 500px;
border: 1px solid #e5e7e9;
border-radius: 4px;
cursor: pointer;
position: relative;
}
.duoxuan > span{
display: inline-block;
width: 100%;
/* width: 300px; */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.duoxuan > i {
position: absolute;
right: 10px;
top: 5px;
}
.select-main{
width: 500px;
padding: 5px 0;
border: 1px solid #188AE2;
background-color: #fff;
position: absolute;
top: 130px;
left: 100px;
z-index: 9999;
display: none;
}
.select-main > li{
position: relative;
cursor: pointer;
padding: 0 10px;
}
.select-main >li.checked{
/* color: red; */
}
.select-main > li:hover{
background-color: #188AE2;
}
.select-main > li > span{
}
.select-main > li > i{
display: none;
position: absolute;
top: 5px;
right: 10px;
color: #188AE2;
}
.select-main >li.checked > i{
display: block;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<div class="duoxuan">
<span>张三</span>
<i class="fa fa-sort-desc"></i>
</div>
<ul class="select-main">
<li>
<span>每日施工计划</span>
<i class="fa fa-check"></i>
</li>
<li>
<span>项目部培训记录</span>
<i class="fa fa-check"></i>
</li>
<li>
<span>项目部车辆使用登记项目部车辆使用登记</span>
<i class="fa fa-check"></i>
</li>
<li>
<span>我的项目</span>
<i class="fa fa-check"></i>
</li>
</ul>
</div>
</div>
<script src="../assets/scripts/jquery.min.js"></script>
<script>
/**
*
* 自己模拟select实现下拉多选
*/
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();//停止冒泡 非ie
else
e.cancelBubble = true;//停止冒泡 ie
}
$('.duoxuan').bind('click', function (e) {
$(this).siblings('.select-main').show();
//写要执行的内容....吥啦不啦
stopPropagation(e);//调用停止冒泡方法,阻止document方法的执行
});
$(document).bind('click', function () {
$('.select-main').hide();
});
$('.select-main >li').on('click',function (e) {
$(this).toggleClass('checked');
// var lis = $('.select-main >li.checked >span');
var lis = $(this).parent('.select-main').children('li.checked').find('span');
var val='';
for(var i = 0;i<lis.length;i++){
val += lis[i].innerHTML+'，';
}
console.log(val);
val = val.slice(0, -1);
$(this).parent(".select-main").siblings('.duoxuan').children('span').html(val)
stopPropagation(e);
})
$('body').click(function () {
$('select-main').hide()
})
</script>
</body>
</html>
自己用ul模拟实现下拉多选框，的更多相关文章
- 我的第一个jquery插件：下拉多选框
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...
- 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- angular2.x 下拉多选框选择组件
angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云 链接: ...
- 品优购商城项目（二）AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
- jquery--获取多选框的值、获取下拉多选框的值
获取多选框的值 var packageCodeList=new Array(); $('#server_id:checked').each(function(){ packageCodeList.pu ...
- 自定义实现 PyQt5 下拉复选框 ComboCheckBox
一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下 ...
- 联合县城市，采用ajax，而使用ul模拟select下拉
接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){ ...
- selectpicker下拉多选框ajax异步或者提前赋值=》默认值
Bootstrap select多选下拉框赋值 success: function (data) { var oldnumber = new Array(); $.each(data, functio ...
- Extjs下拉多选框
//------录入时间,下拉列表框------ var inputTimeRow = new Ext.data.Record.create([ { name : 'value' },{ name : ...
随机推荐
- Activity 的 36 大难点，你会几个
前言 学 Android 有一段时间了,一直都只顾着学新的东西,最近发现很多平常用的少的东西竟让都忘了,趁着这两天,打算把有关 Activity 的内容以问题的形式梳理出来,也供大家查缺补漏. 本文中 ...
- opencv2中访问像素的简单方法-自定义一个宏CV_MAT_ELEM2
利用Mat的step[0],step[1]访问像素的行列,自定义一个宏CV_MAT_ELEM2(src,dtype,y,x),src是待访问的Mat,dtype是src的数据类型(int,float, ...
- LeetCode.1021-删除最外面的括号(Remove Outermost Parentheses)
这是小川的第380次更新,第408篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第242题(顺位题号是1021).有效的括号字符串为空(""),&qu ...
- 数组被遗忘的内置对象--》Array.find()
需求:一个数组包含很多对象,对象中有很多属性.现在给你一个值,且这个值再这个数组的某个对象存在,那么如何找到这个对象? 首先想的是for循环遍历,但这样非常麻烦,js给我们提供了一个find()方法, ...
- vue--生命周期演示
vue实例的生命周期:https://cn.vuejs.org/v2/guide/instance.html#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA-Vue-%E5% ...
- C++ 全局变量 静态变量 全局函数 静态函数
1. static 变量 静态变量的类型 说明符是static. 静态变量当然是属于静态存储方式,但是属于静态存储方式的量不一定就是静态变量. 例如外部变量虽属于静态存储方式,但不一定是静态变量,必须 ...
- 小记---------Elasticsear搭建
Elasticsear搭建 创建用户: useradd elasticsearch passwd elasticsearch 1.解压 tar -zxvf elasticsearch-5.5.2. ...
- oracle ojdbc 版本须对应，否则日期字段查询结果与实际值可能不一致
1. 数据库版本:select * from v$version; 2. 版本对应:
- 基于OneAPM的Web系统性能监测
1.在官网:http://www.oneapm.com/注册试用账号 2.选择AI,添加应用,下载安装本地探针程序(Agent) 3.在Tomcat中部署Web系统,并重启,然后在浏览器访问应用,稍等 ...
- ubuntu中安装Python3.7
一. 源码安装: 1. 官网源码下载: Python官网:https://www.python.org/downloads/ setuptools官网:https://pypi.org/project ...