模拟实现下拉多选框

效果如下



<!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. 什么是 go vendor

    go vendor 是golang引入管理包依赖的方式,1.5版本开始引进,1.6正式引进. 基本原理其实就是将依赖的包,特指外部包,复制到当前工程下的vendor目录下,这样go build的时候, ...

  2. nodejs版本控制：nvm use命令失效

    Downloading npm version ... Download failed. Rolling Back. Rollback failed. remove C:\Users\Administ ...

  3. poj2407（欧拉函数模板题）

    题目链接:https://vjudge.net/problem/POJ-2407 题意:给出n,求0..n-1中与n互质的数的个数. 思路:欧拉函数板子题,先根据唯一分解定理求出n的所有质因数p1,p ...

  4. Java作业 题目：16版.情人节送玫瑰花

    题目:16版.情人节送玫瑰花 题干: 1.实验要求 本实验要求:以情人节送花为业务背景,体验自定义异常以及异常处理机制. 1-1. 业务说明: 1-1.1. 本实验以情人节送花为业务背景,女方提出送花 ...

  5. Spark RDD理解-总结

    1.spark是什么 快速.通用.可扩展的分布式计算引擎. 2. 弹性分布式数据集RDD RDD(Resilient Distributed Dataset),是Spark中最基本的数据抽象结构,表示 ...

  6. 搜索专题:Balloons

    搜索专题:Balloons 这道题一看与时间有关,第一想到的就是BFS,定义一个状态,包含每一个状态的剩余气球数,已经进行的时间和每一个志愿者上一次吹气球的时间: 每一次状态转换时,检查是否有没有使用 ...

  7. luoguP4578_ [FJOI2018]所罗门王的宝藏

    题意 一个n*m的矩阵,初始值全为0,每一行每一列操作一次可以加1或者减1,问能否操作得到给定矩阵. 分析 行和列的分别的加减是可以相互抵消的,因此我们只需要考虑行的加和列的减. 对于给定矩阵每一个数 ...

  8. 双连通分量（点-双连通分量&边-双连通分量）

    概念: 双连通分量有点双连通分量和边双连通分量两种.若一个无向图中的去掉任意一个节点(一条边)都不会改变此图的连通性,即不存在割点(桥),则称作点(边)双连通图. 一个无向图中的每一个极大点(边)双连 ...

  9. 剑指offer 剪绳子

    题目描述 给你一根长度为n的绳子,请把绳子剪成m段(m.n都是整数,n>1并且m>1),每段绳子的长度记为k[0],k[1],...,k[m].请问k[0]xk[1]x...xk[m]可能 ...

  10. 7.利用canvas和js画一个渐变的

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...