当前位置：首页 > JavaScript

js中的下拉列表实现的

2026-01-30 16:58:12JavaScript

使用HTML的select元素

HTML原生提供了<select>元素用于创建下拉列表，结合<option>标签定义选项。这是最基础且兼容性最好的方式。

<select id="fruitSelect">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

通过JavaScript获取选中值：

const selectElement = document.getElementById('fruitSelect');
selectElement.addEventListener('change', (event) => {
  console.log(event.target.value); // 输出选中的value
});

动态生成下拉列表

通过JavaScript动态生成选项，适用于数据来自API或动态变化的场景。

const fruits = ['Apple', 'Banana', 'Orange'];
const selectElement = document.createElement('select');
fruits.forEach(fruit => {
  const option = document.createElement('option');
  option.value = fruit.toLowerCase();
  option.textContent = fruit;
  selectElement.appendChild(option);
});
document.body.appendChild(selectElement);

使用第三方库实现增强下拉

对于需要搜索、多选等高级功能，可以使用第三方库如Select2或React-Select（针对React）。

以Select2为例：

<select id="enhancedSelect" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<script>
$(document).ready(function() {
  $('#enhancedSelect').select2();
});
</script>

自定义样式下拉列表

通过隐藏原生<select>元素，用<div>和<ul>模拟下拉行为，实现完全自定义样式。

<div class="custom-select">
  <div class="selected">Select an option</div>
  <ul class="options">
    <li data-value="1">Option 1</li>
    <li data-value="2">Option 2</li>
  </ul>
</div>

document.querySelector('.selected').addEventListener('click', function() {
  document.querySelector('.options').classList.toggle('active');
});

document.querySelectorAll('.options li').forEach(item => {
  item.addEventListener('click', function() {
    const value = this.getAttribute('data-value');
    document.querySelector('.selected').textContent = this.textContent;
    console.log('Selected value:', value);
  });
});

表单提交处理

下拉列表常用于表单提交，需确保正确处理选中值。

<form id="myForm">
  <select name="fruit" id="formSelect">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </select>
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  console.log('Submitted value:', formData.get('fruit'));
});
</script>

响应式下拉列表

在框架如React/Vue中，通过数据绑定实现响应式更新。

React示例：

js中的下拉列表实现的

function FruitSelect() {
  const [selectedFruit, setSelectedFruit] = useState('apple');

  return (
    <select 
      value={selectedFruit} 
      onChange={(e) => setSelectedFruit(e.target.value)}
    >
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
    </select>
  );
}