Несколько выпадающих с флажками

Question

Я создал раскрывающийся список с множественным выбором, в котором пользователь выбирает параметры, устанавливая флажок для каждого параметра. Он работает хорошо только для одного такого раскрывающегося списка, но мне нужно иметь много, много из них на одной странице. Кто-нибудь знает, как изменить код для достижения этой цели?

Вот кодовая ручка для этого https://codepen.io/chaser7016/pen/yLNGWYb. Ниже я также добавил 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;
    }
    
    .dropdown-list {
        margin: 0;
        overflow-y: auto;
        border-bottom: 1px solid #d5d5d5;
        border-left: 1px solid #d5d5d5;
        border-right: 1px solid #d5d5d5;
        border-top: 1px solid #d5d5d5;
        z-index: 9999999;
        position: absolute;
        padding: 10px;
        background: white;
        top: 67px;
        width: 97.5%;
        left: 9px;
      }
      .dropdown-container ul {
       margin: 0;
       padding: 0;
       }
     .dropdown-container ul li { list-style-type: none; }
     input[type="checkbox"] {
            position: relative;
            top: 2px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div>
    <label>States<span>*</span></label> 
    <div class="dropdown-container">
    <div class="dropdown-button noselect form-control">
        <div class="dropdown-label"></div>
        <div class="dropdown-quantity"><span class="quantity"></span></div>
        <span class="down-arrow">▼</span>
    </div>
    <div class="dropdown-list" style="display: none;">
        <input type="search" placeholder="Search states" class="dropdown-search">
        <ul id="pac">
          <li style="display: list-item;"><input value="Alabama " name="AL" type="checkbox"><label for="AL">Alabama</label></li>
          <li style="display: list-item;"><input value="Alaska" type="checkbox"><label for="AK">Alaska</label></li>
          <li style="display: none;"><input value="American Samoa" type="checkbox"><label for="AS">American Samoa</label></li>
          <li style="display: none;"><input value="AZ" type="checkbox"><label for="AZ">Arizona</label></li>
          <li style="display: none;"><input value="AR" type="checkbox"><label for="AR">Arkansas</label></li>
          <li style="display: list-item;"><input value="CA" type="checkbox"><label for="CA">California</label></li>
          <li style="display: none;"><input value="CO" type="checkbox"><label for="CO">Colorado</label></li>
          <li style="display: none;"><input value="CT" type="checkbox"><label for="CT">Connecticut</label></li>
        </ul>
    </div>
    </div>
</div>

Answer 1

Относительно разметки и стилей

• Метка типа <label>Hello world</label> не должна использоваться без ссылки на FormActionElement
• Сверните флажок и текст метки в <label>, чтобы оба были активными
• Используйте классы .is-active и .is-hidden CSS для описания состояния
• Используйте псевдо ::before с content: для своей стрелки и используйте .is-active (назначенный раскрывающемуся списку компонентов) для обработки состояния стрелки
• При использовании нескольких флажков для одного и того же имени цели используйте атрибут имени, например name="states[]", чтобы вы могли перехватить все выбранные значения внутри states Массив.
• Используйте атрибут data-*, например data-name="Long name", для хранения имени предварительного просмотра.
• Используйте CSS flex вместо float s
• Всегда делайте родителя позиционируется (как relative), если вы планируете сделать ребенка absolute

Относительно JavaScript

• Создать функцию для обработки все ваши собственные выпадающие списки, используя jQuery .each() как $dropdown.each(UI_dropdown); // Apply logic to all dropdowns
• Чем внутри этой функции всегда ссылаться на дочерний элемент как подмножество this выпадающего типа $('.dropdown-button', this);, чтобы предотвратить нацеливание каждого single '.dropdown-button' в DOM
• Обязательно добавьте обработчик к 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>

Если вы хотите еще больше оптимизировать код, вы можете использовать prototype вместо copy-distribution функционирует путем создания jQuery плагина . Это позволит вам лучше инкапсулировать компоненты и гибко настраивать параметры - если вы хотите расширить функциональность.