当前位置：首页 > JavaScript

js实现下拉框

2026-02-28 18:32:10JavaScript

使用HTML和JavaScript创建下拉框

创建一个基本的下拉框（select元素）需要结合HTML和JavaScript。以下是实现方法：

HTML部分

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

JavaScript部分

// 获取下拉框元素
const dropdown = document.getElementById('myDropdown');

// 添加事件监听器
dropdown.addEventListener('change', function() {
  const selectedValue = this.value;
  console.log('选中的值:', selectedValue);
});

动态填充下拉框选项

如果需要从数据动态生成选项：

js实现下拉框

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

const dropdown = document.getElementById('myDropdown');

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

使用jQuery实现下拉框

如果项目中使用jQuery，可以简化代码：

$('#myDropdown').change(function() {
  const selectedValue = $(this).val();
  console.log('选中的值:', selectedValue);
});

// 动态填充
const data = [
  { id: 1, name: '红色' },
  { id: 2, name: '蓝色' },
  { id: 3, name: '绿色' }
];

$.each(data, function(index, item) {
  $('#myDropdown').append(
    $('<option>').val(item.id).text(item.name)
  );
});

实现多级联动下拉框

对于省市联动等场景：

js实现下拉框

const provinceData = {
  '北京': ['东城区', '西城区', '朝阳区'],
  '上海': ['黄浦区', '徐汇区', '浦东新区']
};

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

// 填充省份
Object.keys(provinceData).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 = provinceData[this.value] || [];

  cities.forEach(city => {
    const option = document.createElement('option');
    option.value = city;
    option.textContent = city;
    citySelect.appendChild(option);
  });
});

使用现代框架实现

在Vue中的实现：

<template>
  <select v-model="selectedValue">
    <option v-for="item in options" :value="item.value">
      {{ item.text }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' }
      ]
    }
  }
}
</script>

在React中的实现：

function Dropdown() {
  const [selectedValue, setSelectedValue] = useState('');
  const options = [
    { value: '1', label: '选项1' },
    { value: '2', label: '选项2' }
  ];

  return (
    <select 
      value={selectedValue}
      onChange={(e) => setSelectedValue(e.target.value)}
    >
      {options.map(option => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
}

样式美化

使用CSS美化下拉框：

select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  width: 200px;
}

select:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}