带有复选框的多个下拉菜单

Question

我创建了一个多选下拉列表，用户通过单击每个选项的复选框来选择选项。它仅适用于一个这样的下拉菜单，但我需要在一页上有很多很多这样的下拉菜单。有人知道如何更改代码来实现这一目标吗？

这是此https://codepen.io/chaser7016/pen/yLNGWYb的代码笔。下面，我还添加了在 codepen 中看到的 html/css/jquery。

$('.dropdown-container')

  .on('click', '.dropdown-button', function() {

        $(this).siblings('.dropdown-list').toggle();

  })

  .on('input', '.dropdown-search', function() {

      var target = $(this);

        var dropdownList = target.closest('.dropdown-list');

      var search = target.val().toLowerCase();

    

      if (!search) {

            dropdownList.find('li').show();

            return false;

        }

    

      dropdownList.find('li').each(function() {

          var text = $(this).text().toLowerCase();

            var match = text.indexOf(search) > -1;

            $(this).toggle(match);

        });

  })

  $('.dropdown-list input[type="checkbox"]').on('click', function () {

        

          var title = $(this).closest('.dropdown-list').find('input[type="checkbox"]').val(),

              title = $(this).val() + ",";

        

          if ($(this).is(':checked')) {

              var html = '<span title="' + title + '">' + title + '</span>';

              $('.quantity').append(html);

              $(".hida").hide();

          } 

          else {

              $('span[title="' + title + '"]').remove();

              var ret = $(".hida");

              $('.dropdown dt a').append(ret);

              

          }

      });

.dropdown-button {

    width: 100%;

    background: white;

    cursor: pointer;

    padding: 19px;

    box-sizing: border-box;

    border: 1px solid;

  }

    .dropdown-label, .dropdown-quantity {

        float: left;

        font-family: 'Ubuntu', sans-serif;

    }

    

    .dropdown-quantity {

        margin-left: 4px;

    }

    input[type="search"] {

        padding: 5px;

        width: 100%;

        margin: 3px 0 8px;

    }

Answer 1

关于标记和样式<label>Hello world</label>在未引用 FormActionElement 的情况下不应使用Label like将复选框和标签文本包裹起来，<label>以便两者都可单击使用CSS.is-active类.is-hidden来描述状态对箭头使用::before伪 with并使用（分配给组件下拉列表）来处理箭头状态 content:.is-active当为同一目的使用多个复选框时，请使用名称属性，name="states[]"以便您可以捕获states数组中的所有选定值。使用data-*属性 likedata-name="Long name"来存储预览名称。使用 CSSflex代替floatsrelative如果您打算生孩子，请务必让父母处于有利位置（例如）absolute关于 JavaScript.each() 通过使用jQuery 创建一个函数来处理所有自定义下拉菜单$dropdown.each(UI_dropdown); // Apply logic to all dropdowns比在该函数内部始终引用子元素作为this下拉列表的子集，以防止定位DOM 中的$('.dropdown-button', this);每个元素'.dropdown-button'确保添加一个处理程序来document关闭活动下拉菜单如果打开另一个下拉菜单，还要确保关闭一个下拉菜单：const $dropdown = $('.dropdown-container'); // Cache all;function UI_dropdown() {  const $this = $(this);  const $btn = $('.dropdown-button', this);  const $list = $('.dropdown-list', this);  const $li = $('li', this);  const $search = $('.dropdown-search', this);  const $ckb = $(':checkbox', this);  const $qty = $('.dropdown-quantity', this);  $btn.on('click', function() {    $dropdown.not($this).removeClass('is-active'); // Close other    $this.toggleClass('is-active'); // Toggle this  });  $search.on('input', function() {    const val = $(this).val().trim();    const rgx = new RegExp(val, 'i');    $li.each(function() {      const name = $(this).text().trim();      $(this).toggleClass('is-hidden', !rgx.test(name));    });  });  $ckb.on('change', function() {    const names = $ckb.get().filter(el => el.checked).map(el => {      return `<span class="dropdown-sel">${el.dataset.name.trim()}</span>`;    });    $qty.html(names.join(''));  });}$dropdown.each(UI_dropdown); // Apply logic to all dropdowns// Dropdown - Close opened $(document).on('click', function(ev) {  const $targ = $(ev.target).closest('.dropdown-container');  if (!$targ.length) $dropdown.filter('.is-active').removeClass('is-active');});/* QuickReset */ * { margin: 0; box-sizing: border-box; }.dropdown-container {  position: relative;}.dropdown-label {  padding: 4px 10px 4px 0;}.dropdown-label:before {  content: "\25BC";}.dropdown-container.is-active .dropdown-label:before {  content: "\25B2";}.dropdown-button {  cursor: pointer;  padding: 10px;  border: 1px solid #d5d5d5;  background: white;  display: flex;  flex-flow: row wrap;}.dropdown-quantity {  flex: 1;  display: flex;  flex-flow: row wrap;}.dropdown-sel {  display: inline-block;  background: #eee;  border-radius: 3em;  padding: 2px 10px;  margin: 0 3px 3px 0;}.dropdown-list {  position: absolute;  overflow-y: auto;  z-index: 9999999;  top: calc( 100% - 2px);  width: 100%;  max-height: 80vh;  padding: 10px;  padding-top: 0;  border: 1px solid #d5d5d5;  border-top: 0;  background: white;  display: none;}.dropdown-container.is-active .dropdown-list {  display: block;}.dropdown-list input[type="search"] {  padding: 5px;  display: block;  width: 100%;}.dropdown-list ul {  padding: 0;  padding-top: 10px;  list-style: none;}.dropdown-list li {  padding: 0.24em 0;}input[type="checkbox"] {  margin-right: 5px;}/* HELPER CLASSES */.noselect { user-select: none; }.is-hidden { display: none; }<div class="dropdown-container">  <div class="dropdown-button noselect">    <div class="dropdown-label">STATES:</div>    <div class="dropdown-quantity"></div>  </div>  <div class="dropdown-list">    <input type="search" placeholder="Search states" class="dropdown-search">    <ul>      <li>        <label><input value="AL" name="states[]" data-name="Alabama" type="checkbox">Alabama</label>      </li>      <li>        <label><input value="AK" name="states[]" data-name="Alaska" type="checkbox">Alaska</label>      </li>      <li>        <label><input value="AS" name="states[]" data-name="American Samoa" type="checkbox">American Samoa</label>      </li>      <li>        <label><input value="AZ" name="states[]" data-name="Arizona" type="checkbox">Arizona</label>      </li>      <li>        <label><input value="AR" name="states[]" data-name="Arkansas" type="checkbox">Arkansas</label>      </li>      <li>        <label><input value="CA" name="states[]" data-name="California" type="checkbox">California</label>      </li>      <li>        <label><input value="CO" name="states[]" data-name="Colorado" type="checkbox">Colorado</label>      </li>      <li>        <label><input value="CT" name="states[]" data-name="Connecticut" type="checkbox">Connecticut</label>      </li>    </ul>  </div></div><div class="dropdown-container">  <div class="dropdown-button noselect">    <div class="dropdown-label">POSITIONS:</div>    <div class="dropdown-quantity"></div>  </div>  <div class="dropdown-list">    <input type="search" placeholder="Search positions" class="dropdown-search">    <ul>      <li>        <label><input value="be" name="positions[]" data-name="Backend" type="checkbox">Backend</label>      </li>      <li>        <label><input value="fr" name="positions[]" data-name="Frontend" type="checkbox">Frontend</label>      </li>      <li>        <label><input value="hr" name="positions[]" data-name="HR" type="checkbox">HR</label>      </li>      <li>        <label><input value="de" name="positions[]" data-name="Arizona" type="checkbox">Designer</label>      </li>    </ul>  </div></div><script src="https://code.jquery.com/jquery-3.1.0.js"></script>如果你想进一步优化代码，你可以通过创建jQuery 插件来使用原型而不是复制分布式函数。如果您希望扩展功能，这将为您提供更好的组件封装和灵活的定制选项。