CSS+JS实现选中值>10时显示输入框的select dropdown组件

别硬改原生select/option的默认渲染，浏览器对原生下拉面板的自定义权限限制非常多，插输入框这类需求直接用div模拟下拉交互是成本最低、坑最少的方案，核心逻辑非常简单，给你拆成可直接复用的最小实现：

核心实现逻辑 #

• 用容器+触发器+下拉面板的结构模拟原生select的外观和交互，选项用列表渲染，不要依赖原生option
• 给每个选项绑定对应的数值，监听选中事件，判断选中值是否大于10，控制输入框的显示/隐藏
• 补全和原生select一致的基础交互：点击外部收起、键盘操作支持、选中态高亮即可

最小可运行代码示例 #

<style>
.custom-select {
  position: relative;
  width: 200px;
  font-size: 14px;
}
.select-trigger {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  background: #fff;
}
.select-dropdown {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  z-index: 10;
}
.select-dropdown.show {
  display: block;
}
.option-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.option-item {
  padding: 8px 12px;
  cursor: pointer;
}
.option-item:hover {
  background: #f5f7fa;
}
.custom-input-wrap {
  padding: 8px 12px;
  border-top: 1px solid #eee;
}
.custom-num-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
</style>

<div class="custom-select">
  <div class="select-trigger">请选择数值</div>
  <div class="select-dropdown">
    <ul class="option-list">
      <li class="option-item" data-value="1">1</li>
      <li class="option-item" data-value="2">2</li>
      <li class="option-item" data-value="3">3</li>
      <li class="option-item" data-value="4">4</li>
      <li class="option-item" data-value="5">5</li>
      <li class="option-item" data-value="6">6</li>
      <li class="option-item" data-value="7">7</li>
      <li class="option-item" data-value="8">8</li>
      <li class="option-item" data-value="9">9</li>
      <li class="option-item" data-value="10">10</li>
      <li class="option-item" data-value="11">自定义数值</li>
    </ul>
    <div class="custom-input-wrap" style="display: none;">
      <input type="number" class="custom-num-input" placeholder="请输入期望数值" min="11">
    </div>
  </div>
</div>

<script>
const trigger = document.querySelector('.select-trigger')
const dropdown = document.querySelector('.select-dropdown')
const options = document.querySelectorAll('.option-item')
const inputWrap = document.querySelector('.custom-input-wrap')
const numInput = document.querySelector('.custom-num-input')

// 展开/收起下拉
trigger.addEventListener('click', (e) => {
  e.stopPropagation()
  dropdown.classList.toggle('show')
})

// 选项选中逻辑
options.forEach(item => {
  item.addEventListener('click', (e) => {
    e.stopPropagation()
    const val = Number(item.dataset.value)
    trigger.textContent = val > 10 ? '自定义' : val
    // 核心判断：选中值大于10时显示输入框
    inputWrap.style.display = val > 10 ? 'block' : 'none'
    if (val > 10) {
      numInput.focus()
    } else {
      numInput.value = ''
    }
    dropdown.classList.remove('show')
  })
})

// 点击组件外部收起下拉
document.addEventListener('click', () => {
  dropdown.classList.remove('show')
})
</script>

补充说明 #

• 如果是用React/Vue等框架开发，逻辑完全一致，只需要把显示隐藏的控制换成框架的响应式状态即可，不需要引入额外的第三方组件库
• 可以按需补充键盘上下键切换选项、回车选中、ESC收起的交互，对齐原生select的使用体验
• 自定义输入框建议加上数值合法性校验，提交表单时优先取输入框内的有效值即可

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