模拟实现下拉多选框

效果如下



<!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. node在Web中的用途

    1.网站后台: user browser ——> application server(node开发的application,处理用户的所有请求和给用户的响应) 2.分发数据请求,渲染HTML: ...

  2. Golang的面向对象编程【结构体、方法、继承、接口】

    Golang也支持面向对象编程.但与以前学过传统的面向对象编程语言有区别.1)Golang没有类class,Go语言的结构体struct和类class有相似的特性.2)Golang中不存在继承,方法重 ...

  3. github局部不同图片合并插件

    用于解决游戏开发时,一套图里有局部地区图片不同其他地方相同,导致资源重复过大的问题 地址:https://github.com/Elringus/SpriteDicing

  4. python学习之数据类型（List）

    3.5 列表 3.5.1 列表的介绍 ​ 列表是python的基础数据类型之⼀,其他编程语言也有类似的数据类型. 比如JS中的数组, java中的数组等等.它是以[ ]括起来, 每个元素⽤' , '隔 ...

  5. body标签中的相关标签

    一.内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> ...

  6. Akka系列（十）：Akka集群之Akka Cluster

    前言........... 上一篇文章我们讲了Akka Remote,理解了Akka中的远程通信,其实Akka Cluster可以看成Akka Remote的扩展,由原来的两点变成由多点组成的通信网络 ...

  7. Idea 竖选文本、竖向选择、横向纵向选择文本代码

    在使用Idea的时候,可能需要在相同类型的文字中增加数据,所以Idea提供一种列式选择方式,提高开发的效率. 如果需要使用,我们可以选中代码,右键单击,在弹出的菜单中选中[Column Selecti ...

  8. elasticsearch-analysis-ik windows 环境 IK 中文分词器 的 下载 和 安装

    1,下载插件压缩包(本地测试建议用迅雷下,生产用的绝对不要用迅雷下),链接地址:https://github.com/medcl/elasticsearch-analysis-ik/releases/ ...

  9. Python 用户交互程序(day1)

    一: 变量 变:变化,重在变字,量:计量,衡量,表示一种状态 变量赋值 : number = 1 变量的规则: 数字,字母,下划线, 任意组合,数字不能开头,python 的关键字不能用,变量名尽量有 ...

  10. SSCursor 处理大量数据

    使用游标的好处是不会将查询结果全部都放入内存中,避免了占用大量的内存,会从存储块中读取记录,并且一条一条的返回来 class DbConnection(object): def __init__(se ...