如何阻止自定义样式<select>弹出默认列表并封装为可复用类

1. 阻止原生下拉弹出（替代.blur()的流畅方案） #

放弃使用.blur()，直接在原生<select>的mousedown事件中阻止默认行为——这个时机比click更早，能在原生下拉触发前拦截，同时保留组件的焦点状态，避免生硬过渡：

nativeSelect.addEventListener('mousedown', (e) => {
  e.preventDefault();
  // 此处触发自定义列表的显示/切换逻辑
});

2. 修复自定义列表点击不关闭+同步原生状态 #

给每个自定义选项绑定点击事件，选中后完成三件事：

• 隐藏自定义列表
• 同步原生<select>的value值
• 手动触发原生change/input事件，确保原有业务逻辑不受影响

customOption.addEventListener('click', () => {
  const selectedValue = customOption.dataset.value;
  // 同步原生select值
  nativeSelect.value = selectedValue;
  // 隐藏自定义列表
  customList.style.display = 'none';
  // 触发原生事件
  nativeSelect.dispatchEvent(new Event('change'));
  nativeSelect.dispatchEvent(new Event('input'));
});

3. 解决列表挤压元素问题 #

将自定义列表设为绝对定位，同时给包裹原生select和自定义列表的父容器设置相对定位，让列表脱离文档流，不会挤压其他元素：

/* 父容器样式 */
.select-container {
  position: relative;
  /* 其他自定义样式 */
}

/* 自定义列表样式 */
.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  /* 其他自定义样式：背景、边框、滚动条等 */
}

4. 封装为可复用的SelectBox类 #

把所有逻辑封装到类中，初始化时传入原生select的选择器或DOM元素，自动完成结构创建、事件绑定：

class SelectBox {
  constructor(selectElement) {
    this.nativeSelect = typeof selectElement === 'string' 
      ? document.querySelector(selectElement) 
      : selectElement;
    this.container = this.createWrapper();
    this.customList = this.buildCustomOptions();
    this.bindAllEvents();
  }

  createWrapper() {
    const wrapper = document.createElement('div');
    wrapper.className = 'select-container';
    this.nativeSelect.parentNode.insertBefore(wrapper, this.nativeSelect);
    wrapper.appendChild(this.nativeSelect);
    return wrapper;
  }

  buildCustomOptions() {
    const list = document.createElement('div');
    list.className = 'custom-options';
    list.style.display = 'none';

    // 从原生option生成自定义选项
    Array.from(this.nativeSelect.options).forEach(option => {
      const customOpt = document.createElement('a');
      customOpt.href = '#';
      customOpt.dataset.value = option.value;
      customOpt.textContent = option.textContent;
      customOpt.addEventListener('click', (e) => {
        e.preventDefault();
        this.chooseOption(customOpt);
      });
      list.appendChild(customOpt);
    });

    this.container.appendChild(list);
    return list;
  }

  chooseOption(customOpt) {
    const value = customOpt.dataset.value;
    this.nativeSelect.value = value;
    this.customList.style.display = 'none';
    // 触发原生事件
    this.nativeSelect.dispatchEvent(new Event('change'));
    this.nativeSelect.dispatchEvent(new Event('input'));
  }

  bindAllEvents() {
    // 阻止原生下拉
    this.nativeSelect.addEventListener('mousedown', (e) => {
      e.preventDefault();
      this.toggleList();
    });

    // 点击外部关闭列表
    document.addEventListener('click', (e) => {
      if (!this.container.contains(e.target)) {
        this.customList.style.display = 'none';
      }
    });
  }

  toggleList() {
    this.customList.style.display = this.customList.style.display === 'none' 
      ? 'block' 
      : 'none';
  }
}

// 使用示例
const myCustomSelect = new SelectBox('#target-select');

内容的提问来源于stack exchange，提问作者Hazmatron