自己用ul模擬實現下拉多選框，

阿新 • • 發佈：2018-06-22

ogg point shee index ati ref -m order nowrap

模擬實現下拉多選框

效果如下
技術分享圖片


<!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模擬實現下拉多選框，

ogg point shee index ati ref -m order nowrap 模擬實現下拉多選框效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta char

angular2.x 下拉多選框選擇組件

下拉 round ice osi 界面 poi top iou open angular2.x - 5.x 的下拉多選框選擇組件 ng2 -- ng5。最近在學angular4，經常在交流群看見很多人問下拉多選怎麽做。。。今天就隨便寫的個。組件源碼百度雲鏈接:

select標籤（下拉多選框）

預設顯示的文字變為不可選 <select> <option value="" disabled selected hidden>choose</option> <option value="0">0</option&g

學習筆記-extjs3.4 下拉多選框

原先做的時候，在網上找了很多例子，最後定下了LovCombo這個擴充套件例子，比較好看，而且穩定性強一些，暫時還沒發現什麼bug，先貼張圖看看效果。作為多選的時候，會是一種很好的選擇，下面是主要程式碼。 <link rel="styles

selectpicker下拉多選框ajax非同步或者提前賦值=》預設值

Bootstrap select多選下拉框賦值 success: function (data) { var oldnumber = new Array(); $.each(data, function (i) { oldnumber.push(data[i].

bootstrap下拉多選框（bootstrap-select）

前端用vue+bootstrap,需求是做可多選下拉框。首先附上該外掛的下載地址。要使用該外掛在引入jquery.js和bootstrap.js後還需要引入以上地址資源中的 bootstrap-select.min.css 和 bootstrap-select.m

Jquery.sumoselect外掛實現下拉複選框

1、官方網站： https://hemantnegi.github.io/jquery.sumoselect/ 說明介紹網址 https://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html dem

bootstrap-select下拉多選框

更多參考引入樣式 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> &l

外掛介紹：Bootstrap 下拉多選框外掛Bootstrap Multiselect

div+ul 模擬select下拉

HTML用DIV/CSS實現下拉列表

HTML程式碼： <body> <div class="title" > <h1>SYROS</h1> <ul> <li><a href="">HOME<

使用bootstrap 的下拉選單實現select的下拉複選框多選

CSS程式碼:/*多選下拉框樣式（根據自己的樣式調整）*/ .dropdown_item{width: 100%} .dropdown_item>li:HOVER{background-color

用純css改變下拉列表select框的默認樣式

隱藏如何 pos share ack rop href static image 在這篇文章裏，我將介紹如何不依賴JavaScript用純css來改變下拉列表框的樣式。事情是這樣的，您的設計師團隊向您發送一個新的PSD（Photoshop文檔），它是一個新的網站的最終設

單選框，多選框，下拉框程式碼結構和注意部分

<html> <head> <mate charset="utf-8"> </head> <body> <!-- 單選框，主要注意na

dorado7.x 下拉複選框實現以及位置浮動不固定在下拉框的問題及解決辦法

在所需的property,設定trigger 下一步：設定onExcute: var ChannelInputs=view.get("#ChannelInputs"); view.get("#dataSetChannel").flushAsync(); ChannelInp

Bootstrap-select下拉多選獲取選中的資料

剛好用到bootstrap-select外掛，遇到問題： 1.如何把選中的人員[名字+id]獲取到？ 2.後臺要求的是json格式的資料，如何處理？ 3.前端用el表示式在jsp中綁定了<select><option>，把id綁到哪個位置方便獲取？(

用純css改變下拉列表select框的預設樣式

在使用html的select標籤的時候，可能我們會覺得原有的樣式比較醜，想把它變的美觀一點，那麼這裡有兩種方法。 1.方法一： <span style="font-family:KaiTi_GB2312;font-size:14px;">sele

+++用純css改變下拉列表select框的預設樣式+++

http://ourjs.com/detail/551b9b0529c8d81960000007 在這篇文章裡，我將介紹如何不依賴JavaScript用純css來改變下拉列表框的樣式。問題的提出事情是這樣的，您的設計師團隊向您傳送一個新的PSD（Photos

下拉多選checkbox

本文原創，轉載請註明出處 CSS程式碼 JS程式碼全部程式碼今天根據要求讓實現下拉列表加入多選按鈕，之前寫過百度搜索效果，但是感覺不太適用。然後大概想了一下就動手開始試著去寫，實現效果如下圖：（注：選中下拉多選框

element-ui 裡面el-checkbox多選框，實現全選單選

data裡面定義了 data:[], actionids:[],//選擇的那個actionid num1:0,//沒選擇的計數 &nb

自己用ul模擬實現下拉多選框，

模擬實現下拉多選框

相關推薦