js 实现 下拉列表

使用原生 JavaScript 实现下拉列表

使用 <select> 和 <option> 元素创建基础下拉列表：

<select id="myDropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

通过 JavaScript 获取选中的值：

document.getElementById('myDropdown').addEventListener('change', function() {
  console.log(this.value); // 获取选中的值
});

自定义样式下拉列表

创建更灵活的自定义下拉组件：

<div class="custom-dropdown">
  <div class="dropdown-header">选择选项</div>
  <ul class="dropdown-options">
    <li data-value="opt1">选项一</li>
    <li data-value="opt2">选项二</li>
    <li data-value="opt3">选项三</li>
  </ul>
</div>

添加交互逻辑：

const dropdown = document.querySelector('.custom-dropdown');
const header = dropdown.querySelector('.dropdown-header');
const options = dropdown.querySelectorAll('.dropdown-options li');

header.addEventListener('click', () => {
  dropdown.classList.toggle('active');
});

options.forEach(option => {
  option.addEventListener('click', () => {
    header.textContent = option.textContent;
    dropdown.classList.remove('active');
    console.log(option.dataset.value); // 获取选中值
  });
});

动态生成下拉选项

从数据数组动态创建选项：

const data = [
  { id: 1, name: '北京' },
  { id: 2, name: '上海' },
  { id: 3, name: '广州' }
];

const select = document.createElement('select');
data.forEach(item => {
  const option = document.createElement('option');
  option.value = item.id;
  option.textContent = item.name;
  select.appendChild(option);
});

document.body.appendChild(select);

多级联动下拉列表

实现省市联动选择：

const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');

const data = {
  '北京': ['朝阳区', '海淀区', '东城区'],
  '上海': ['浦东新区', '静安区', '黄浦区']
};

// 填充省份
Object.keys(data).forEach(province => {
  const option = document.createElement('option');
  option.value = province;
  option.textContent = province;
  provinceSelect.appendChild(option);
});

// 省份变化时更新城市
provinceSelect.addEventListener('change', function() {
  citySelect.innerHTML = '<option value="">选择城市</option>';
  const cities = data[this.value];
  cities.forEach(city => {
    const option = document.createElement('option');
    option.value = city;
    option.textContent = city;
    citySelect.appendChild(option);
  });
});

搜索过滤下拉列表

为下拉选项添加搜索功能：

<input type="text" id="searchInput" placeholder="搜索...">
<ul id="searchableDropdown">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>葡萄</li>
</ul>

实现搜索过滤：

const searchInput = document.getElementById('searchInput');
const dropdownItems = document.querySelectorAll('#searchableDropdown li');

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value.toLowerCase();
  dropdownItems.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = text.includes(searchTerm) ? '' : 'none';
  });
});

使用第三方库实现高级下拉

使用 Select2 库创建功能丰富的下拉列表：

<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

初始化 Select2：

$(document).ready(function() {
  $('.js-example-basic-multiple').select2();
});

这些方法涵盖了从基础到高级的下拉列表实现方式，可以根据项目需求选择合适的方案。