模拟实现下拉多选框

效果如下



<!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. 使用canvas实现对图片的批量打码

    最近有个需求,利用h5的canvas对图片一些涉及个人隐私的地方进行打码再上传,而且最好能实现批量打码.意思是在一张图片上对哪些地方做了打码,后续的所有图片都在同样的地方也可以自动打上码,不用人工一张 ...

  2. Python示例-TCP Port Scan

    import socket import threading # target host address host = "127.0.0.1" # thread list thre ...

  3. jmeter-在beanshell里用代码提取参数

    接口返回json(response_data): { "Code":1, "Message":null, "Error":null, &qu ...

  4. Win10成功安装IIS后浏览器打开localhost正确显示的页面

  5. ucloud启用redis

    可以设置密码

  6. 【转】mysql的group_concat函数，默认最大长度是1024

    mysql的group_concat函数,默认最大长度是1024 查询sql: show variables like 'group_concat_max_len'; 设置方式: 修改配置文件my.i ...

  7. 图数据库：AgensGraph

    文章目录 AgensGraph简介 官网及下载 安装AgensGraph 上传并解压 添加agens用户 配置.bashrc 初始化并启动 初始化数据库 启动数据库 执行交互式终端 图数据库基础概念 ...

  8. <form:select>

    <form:select path="classification" class="input-medium"> <form:option v ...

  9. npm学习（四）之如何安装全局包、更新全局安装的包、卸载全局安装的包

    如何安装全局包 有两种方式用来安装 npm 包:本地安装和全局安装.选用哪种方式来安装,取决于你如何使用这个包. 如果你想将其作为一个命令行工具,那么你应该将其安装到全局.这种安装方式后可以让你在任何 ...

  10. source与./执行的区别

    source与./执行的区别作用:使文件生效区别:1.source不需要文件有可执行(x)权限,而./需要文件有x权限,否则报错2.source执行是在当前shell中执行,./在当前shell的子s ...