模拟实现下拉多选框

效果如下



<!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. vsftp新建用户及目录时遇到的坑

    1.有关vsftp配置及用户权限设置,请参考: http://blog.sina.com.cn/s/blog_3edc5e2e0102vzv8.html 2.需求:公司另一部门要求单独建一目录,来存在 ...

  2. AWSome Day简介

    AWSome Day是什么? 它是一场为时一天.结合教育与技术新知的云计算技术免费研讨会.是面向所有开发人员.IT技术人员.或技术/业务领域决策者必备的基础云计算课程.AWS专业级讲师将在现场带领您从 ...

  3. div 加滚动条 超过div宽度 自动换行 div居中

    一.div 中加滚动条 一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽 ...

  4. 关于使用unittest单元测试框架的一些问题集

    1.使用unittest.TestSuites生成的测试套件,使用HtmlTestRunner运行时报Type Error. 1)是由于使用unittest.TestSuites生成的测试套件里的Te ...

  5. Unity 声音与录音与麦克风实时播放

    Unity AudioSource与MicroPhone以及AudioClip之间的关系. 下面是一个声音,长度为7秒钟,声音的实际数据本质是由采样点组成的的列表,一秒钟内的采样点数就是采样频率,下面 ...

  6. LeetCode.1029-两城调度(Two City Scheduling)

    这是小川的第383次更新,第412篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第245题(顺位题号是1029).公司计划采访的人数为2N.将第i个人飞往城市A的费用是[ ...

  7. switch-case分支结构总结

    1,格式 switch(表达式){ case 常量1:执行语句1: case 常量1:执行语句1: ... ... case 常量n:执行语句n: default:执行语句:} 2,说明: 根据swi ...

  8. 简单而粗暴的方法画任意阶数Bezier曲线

    简单而粗暴的方法画任意阶数Bezier曲线 虽然说是任意阶数,但是嘞,算法原理是可以到任意阶数,计算机大概到100多阶就会溢出了 Bezier曲线介绍] [本文代码] 背景 在windows的Open ...

  9. windows 2008 创建域服务器问题 账户密码不符合要求

    windows 2008新建域时,本地administrator账户将成域Administrator账户.无法新建域,因为本地administrator账户密码不符合要求.*解决办法:很多人都会想到在 ...

  10. 缓存---CDN（内容分发网络）

    4.CDN   内容分发网络(content distribution network,CDN)是一种互联的网络系统,它利用更靠近用户的服务器从而更快更可靠的将静态资源分发给用户. cdn主要有以下优 ...