Heim > Artikel > Web-Frontend > JS implementiert den Dropdown-Kontrollkästchen-Effekt (Codebeispiel)
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:
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({'tag1':tag1,'tag2':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='true' style='display:none;'>" + "请选择项目" + "</option>"); $(hiddenId + ' label').find('input').click(function() { // 点击向数组添加元素 if ($(this).is(':checked')) { tagArr.push($(this).parent().text()); $(selectId).html("<option checked='true' style='display:none;'>" + tagArr.join(",") + "</option>"); } else { tagArr.splice(tagArr.indexOf($(this).parent().text()), 1); // 删除对应元素 if (tagArr.length == 0) { $(selectId).html("<option checked='true' style='display:none;'>" + "请选择项目" + "</option>"); } else { $(selectId).html("<option checked='true' style='display:none;'>" + 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!