模拟实现下拉多选框

效果如下



<!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模拟实现下拉多选框，的更多相关文章

  1. 我的第一个jquery插件：下拉多选框

    <!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...

  2. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. angular2.x 下拉多选框选择组件

    angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云   链接: ...

  4. 品优购商城项目（二）AngularJS、自动代码生成器、select2下拉多选框

    品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...

  5. jquery--获取多选框的值、获取下拉多选框的值

    获取多选框的值 var packageCodeList=new Array(); $('#server_id:checked').each(function(){ packageCodeList.pu ...

  6. 自定义实现 PyQt5 下拉复选框 ComboCheckBox

    一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下 ...

  7. 联合县城市，采用ajax，而使用ul模拟select下拉

    接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){                          ...

  8. selectpicker下拉多选框ajax异步或者提前赋值=》默认值

    Bootstrap select多选下拉框赋值 success: function (data) { var oldnumber = new Array(); $.each(data, functio ...

  9. Extjs下拉多选框

    //------录入时间,下拉列表框------ var inputTimeRow = new Ext.data.Record.create([ { name : 'value' },{ name : ...

随机推荐

  1. monkeyrunner初试

    Monkeyrunner学习心得 在网上下载并且配置好python,androidsdk和jdk的环境之后,在cmd中运行一下python,java -vesion和monkeyrunner,使之都可 ...

  2. 【内部】Fiddler设置代理请求的方式

    1.2 打开Fiiddler,设置如图步骤: 3.添加规则: 4.这里选择第三个选项: 5.选中^开始,空格结束的如图内容.复制你要代理的地址.如:http://wap.cmread.com/nap/ ...

  3. python2.X与3.X比较及Python编译器选择

  4. 爬虫4之pyquery

    pyquery 初始化 字符串初始化 from pyquery import PyQuery as pq doc = pq(html)#html为需要处理的内容 #方法与CSS选择器相同 print( ...

  5. vue2 学习笔记

    一.部署环境1.安装nodeJS -- 地址:https://nodejs.org/zh-cn/ 2.安装vue脚手架 (用于创建VUE项目的) 进入项目文件或者新建一个文件 npm install ...

  6. 原生js实现选中所有的checkbox

    <div class="con"> <input name='多选项名称' type='checkbox' value='' id="all" ...

  7. CF486B OR in Matrix(构造+思维)

    CF486B 一道有趣的思维题 由于or的性质可知只要a[i][j]为1那么b中第i行,第j列将都变成1 相反的,如果b[i][j]是0那么a中第i行,第j列都必须是0 根据第二个性质我们可以构造出a ...

  8. mybatis generator 源码修改

    项目中使用mybatis + 通用mapper,用mybatis generator生成代码时有些不方便,参考了网上的一些例子,修改mybatis genrerator的源码. 首先,下载mybati ...

  9. Oracle 查看 impdp 正在执行的内容

    1. 今天进行数据库备份恢复 一直卡住  找了一下 公司另外一个部门的方神提供了一个方法连查看 具体在做什么操作: 2. 现象. impdp 到一个地方直接卡住不动 具体位置 view 这个地方足足卡 ...

  10. java学习笔记 - 线程池（一）

    线程池(Thread Pool):把一个或多个线程通过统一的方式进行调度和重复使用的技术,避免了因为线程过多而带来使用上的开销 优点:(面试题)可重复使用已有线程,避免对象创建.消亡和过度切换的性能开 ...