多选下拉框开发教程及JS逻辑解析

<div class="multiselect" data-placeholder="请选择选项">
  <div class="multiselect-input">
    <span class="selection-tags"></span>
    &lt;input type=&quot;text&quot; class=&quot;search-input&quot; placeholder=&quot;&quot;&gt;
  </div>
  <ul class="multiselect-options">
    <li data-value="1">选项一</li>
    <li data-value="2">选项二</li>
    <li data-value="3">选项三</li>
  </ul>
</div>

class MultiSelect {
  constructor(container) {
    this.container = container;
    this.options = Array.from(container.querySelectorAll('.multiselect-options li'));
    this.selected = [];
    this.searchInput = container.querySelector('.search-input');
    this.initEvents();
  }

  initEvents() {
    this.container.querySelector('.multiselect-input').addEventListener('click', () => {
      this.toggleDropdown();
    });

    this.searchInput.addEventListener('input', (e) => {
      this.filterOptions(e.target.value);
    });

    this.options.forEach(item => {
      item.addEventListener('click', () => {
        this.toggleSelection(item);
      });
    });
  }

  toggleSelection(item) {
    const value = item.dataset.value;
    const index = this.selected.findIndex(s => s.value === value);

    if (index > -1) {
      this.selected.splice(index, 1);
      item.classList.remove('selected');
    } else {
      this.selected.push({ value: value, label: item.textContent });
      item.classList.add('selected');
    }
    this.renderTags();
  }

  renderTags() {
    const tagsContainer = this.container.querySelector('.selection-tags');
    tagsContainer.innerHTML = '';
    this.selected.forEach(s => {
      const span = document.createElement('span');
      span.className = 'tag';
      span.textContent = s.label;
      span.onclick = (e) => {
        e.stopPropagation();
        this.removeTag(s.value);
      };
      tagsContainer.appendChild(span);
    });
  }

  removeTag(value) {
    const item = this.container.querySelector(`[data-value="${value}"]`);
    this.selected = this.selected.filter(s => s.value !== value);
    if (item) item.classList.remove('selected');
    this.renderTags();
  }

  filterOptions(keyword) {
    this.options.forEach(opt => {
      const text = opt.textContent.toLowerCase();
      if (text.includes(keyword.toLowerCase())) {
        opt.style.display = 'block';
      } else {
        opt.style.display = 'none';
      }
    });
  }

  toggleDropdown() {
    this.container.classList.toggle('open');
    if (this.container.classList.contains('open')) {
      this.searchInput.focus();
    }
  }
}

// 自动初始化页面上所有 .multiselect
document.querySelectorAll('.multiselect').forEach(el => {
  new MultiSelect(el);
});