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();
});这些方法涵盖了从基础到高级的下拉列表实现方式，可以根据项目需求选择合适的方案。
