如何在没有任何第三方库的情况下实现多复选框下拉

Question

如何在没有任何第三方库的情况下实现多复选框下拉。

我们想要一个带有复选框的下拉菜单，而不是在 jquery 和 javascript 中。我们想要纯粹的服务器端控制 .

Answer 1

纯服务器端控制意味着您将仅依赖于 HTML 标准。
HTML Select 元素具有 multiple 属性，可让用户选择多个值。
HTML 规范 不需要特定的渲染布局，这让浏览器不受任何限制。大多数时候，选定的选项只是突出显示，加上 multiple 属性使选择元素失去其下拉外观样式（您可以使用 size 属性减少其高度）。

<!-- The second value will be selected initially -->
<p>Maintain <kbd>Ctrl</kbd> key down to select multiple elements</p>
<select name="multi" multiple size="2">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
  <option value="value4">Value 4</option>
  <option value="value5">Value 5</option>
  <option value="value6">Value 6</option>
  <option value="value7">Value 7</option>
  <option value="value8">Value 8</option>
  <option value="value9">Value 9</option>
  <option value="value10">Value 10</option>
</select>

如果您改变主意使用Javascript，您可以实现这个详细答案建议的内容，因为它只需要很少的额外Javascript和CSS，但不需要库。

Answer 2

    <div class="dropdown">
      <button id="dropdownButton">Multi-Select</button>
      <div class="dropdown-content" id="checkboxContainer"></div>
    </div>
    
    <select name="multi" multiple size="2" id="multiSelect">
      <option value="value1">Value 1</option> 
      <option value="value2" selected>Value 2</option>
      <option value="value3">Value 3</option>
      <option value="value4">Value 4</option>
      <option value="value5">Value 5</option>
      <option value="value6">Value 6</option>
      <option value="value7">Value 7</option>
      <option value="value8">Value 8</option>
      <option value="value9">Value 9</option>
      <option value="value10">Value 10</option>
    </select>



 .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown button {
    width: 100%;
    text-align: left;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content label {
    display: block;
    padding: 8px 16px;
  }

  .dropdown-content label:hover {
    background-color: #f1f1f1;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  select[multiple] {
    display: none;
  }



 const multiSelect = document.getElementById('multiSelect');
  const checkboxContainer = document.getElementById('checkboxContainer');
  const dropdownButton = document.getElementById('dropdownButton');

  function updateButtonText() {
    const selectedOptions = Array.from(multiSelect.selectedOptions);
    if (selectedOptions.length === 0) {
      dropdownButton.textContent = 'Multi-Select';
    } else if (selectedOptions.length <= 2) {
      const selectedTexts = selectedOptions.map(option => option.text).join(', ');
      dropdownButton.textContent = selectedTexts;
    } else {
      dropdownButton.textContent = `${selectedOptions.length} items selected`;
    }
  }

  Array.from(multiSelect.options).forEach(option => {
    const label = document.createElement('label');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.value = option.value;
    checkbox.checked = option.selected;
    checkbox.addEventListener('change', function() {
      option.selected = checkbox.checked;
      updateButtonText();
    });

    label.appendChild(checkbox);
    label.appendChild(document.createTextNode(option.text));
    checkboxContainer.appendChild(label);
  });

  updateButtonText(); // Initial button text update