Heim  >  Artikel  >  Web-Frontend  >  JS implementiert den Dropdown-Kontrollkästchen-Effekt (Codebeispiel)

JS implementiert den Dropdown-Kontrollkästchen-Effekt (Codebeispiel)

青灯夜游
青灯夜游Original
2018-09-20 15:29:166373Durchsuche

In diesem Kapitel erfahren Sie, wie Sie den Dropdown-Kontrollkästchen-Effekt implementieren (Codebeispiel). Ich hoffe, dass es für Sie hilfreich ist.

Schauen wir uns zunächst den Effekt an:

JS implementiert den Dropdown-Kontrollkästchen-Effekt (Codebeispiel)

Schauen wir uns den Code an:

HTML-Code:

<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-Code:

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-Code:

/**
     * [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")

Hinweis: Wenn es viele Optionen gibt, können Sie ein Array definieren und es einfügen HTML zum Implementieren von Dropdown-Optionen Sie können sich auf die Schreibmethode der dreistufigen Verknüpfung beziehen: Spielen Sie mit dem dreistufigen Verknüpfungsbeispiel von JavaScript.

Das obige ist der detaillierte Inhalt vonJS implementiert den Dropdown-Kontrollkästchen-Effekt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn