首頁  >  文章  >  web前端  >  js實作下拉複選框效果(程式碼實例)

js實作下拉複選框效果(程式碼實例)

青灯夜游
青灯夜游原創
2018-09-20 15:29:166374瀏覽

本章帶給大家用js實作下拉複選框效果(程式碼實例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

先看看效果:

js實作下拉複選框效果(程式碼實例)

#下面我們來看看程式碼:

HTML程式碼:

<div>
        <select name="" id="lang1"></select>
        <ul id="ck1">
            <li>
                <label><input type="checkbox">HTML</label>
            </li>
            <li>
                <label><input type="checkbox">CSS</label>
            </li>
            <li>
                <label><input type="checkbox">JavaScript</label>
            </li>
            <li>
                <label><input type="checkbox">jQuery</label>
            </li>
            <li>
                <label><input type="checkbox">PHP</label>
            </li>
            <li>
                <label><input type="checkbox">MySQL</label>
            </li>
        </ul>
    </div>
    <hr><!--HTML结构不能变-->
    <div>
        <select name="" id="lang2"></select>
        <ul id="ck2">
            <li>
                <label><input type="checkbox">Java</label>
            </li>
            <li>
                <label><input type="checkbox">C#</label>
            </li>
            <li>
                <label><input type="checkbox">C++</label>
            </li>
            <li>
                <label><input type="checkbox">Pyhton</label>
            </li>
        </ul>
    </div>
    <input type="button" onclick="console.log({&#39;tag1&#39;:tag1,&#39;tag2&#39;:tag2,})" value="查看字段">

css程式碼:

div {
    display: inline-block;
}

select {
    min-width: 200px;
    height: 25px;
    border: 1px solid #000;
}

ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #000;
}

label {
    display: block;
    padding: 2px 10px;
    white-space: nowrap;
}

ul li:hover {
    background-color: #aabbcc;
}

JavaScript程式碼:
##

/**
     * [dropDownCk 下拉复选框]
     * @param  {[String]} boxId    [父级元素id]
     * @param  {[String]} selectId [下拉选id]
     * @param  {[String]} hiddenId [隐藏区域id]
     * @return {[Array]}          [description]
     */
    function dropDownCk(selectId,hiddenId) {

        var boxId = "#" + boxId,
            selectId = "#" + selectId,
            hiddenId = "#" + hiddenId;
        
        $(hiddenId).mouseleave(function(){ // 鼠标离开隐藏复选区域
            
            $(this).hide();
        
        });
        
        $(selectId).click(function() { // 切换显示与隐藏

            $(hiddenId).toggle();

        });

        var tagArr = []; // 接收复选字段数组

        $(selectId).html("<option checked=&#39;true&#39; style=&#39;display:none;&#39;>" + "请选择项目" + "</option>");

        $(hiddenId + &#39; label&#39;).find(&#39;input&#39;).click(function() { // 点击向数组添加元素

            if ($(this).is(&#39;:checked&#39;)) {

                tagArr.push($(this).parent().text());

                $(selectId).html("<option checked=&#39;true&#39; style=&#39;display:none;&#39;>" + tagArr.join(",") + "</option>");

            } else {

                tagArr.splice(tagArr.indexOf($(this).parent().text()), 1); // 删除对应元素

                if (tagArr.length == 0) {

                    $(selectId).html("<option checked=&#39;true&#39; style=&#39;display:none;&#39;>" + "请选择项目" + "</option>");

                } else {

                    $(selectId).html("<option checked=&#39;true&#39; style=&#39;display:none;&#39;>" + tagArr.join(",") + "</option>");

                }

            }

        });

        return tagArr;
    }

    var tag1 = dropDownCk("lang1","ck1");
    var tag2 = dropDownCk("lang2","ck2")

注意:當遇到選項比較多時,可以定義一個陣列插入到HTML中,實作下拉的選項,可以參考三級連動的寫法:

玩javascript之三級連動實例

以上是js實作下拉複選框效果(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn