当前位置：首页 > JavaScript

js实现combox

2026-04-05 10:25:58JavaScript

JavaScript 实现 ComboBox

要实现一个 ComboBox（组合框），可以结合 HTML 的 <select> 元素和 JavaScript 的动态交互功能。以下是实现方法：

基本 HTML 结构

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

动态添加选项

const comboBox = document.getElementById('comboBox');
const newOption = document.createElement('option');
newOption.value = 'option3';
newOption.textContent = '选项3';
comboBox.appendChild(newOption);

事件监听

comboBox.addEventListener('change', function() {
  const selectedValue = this.value;
  console.log('选中的值:', selectedValue);
});

自定义样式

可以通过 CSS 美化默认的 <select> 元素，或使用 <div> 和 <input> 自定义 ComboBox：

<div class="custom-combobox">
  <input type="text" id="comboInput" placeholder="搜索或选择...">
  <div class="dropdown-content" id="dropdown">
    <div class="option" data-value="option1">选项1</div>
    <div class="option" data-value="option2">选项2</div>
  </div>
</div>

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

comboInput.addEventListener('focus', () => {
  dropdown.style.display = 'block';
});

document.querySelectorAll('.option').forEach(option => {
  option.addEventListener('click', () => {
    comboInput.value = option.textContent;
    dropdown.style.display = 'none';
  });
});