Bootstrap下拉选择列表扩展：按键时在双文本框下方显示

核心实现思路 #

1. 监听按键事件触发显示逻辑，初始状态隐藏Select元素
2. 借助父容器相对定位，将Select精准定位到两个文本框的下方
3. 可按需指定特定按键触发，或实现点击外部区域隐藏的交互

完整代码示例 #

HTML结构

<div class="input-container">
  <input type="text" placeholder="文本框1" class="form-input">
  <input type="text" placeholder="文本框2" class="form-input">
  <select id="dropdown-select" style="display: none;">
    <option value="opt1">选项1</option>
    <option value="opt2">选项2</option>
    <option value="opt3">选项3</option>
    <option value="opt4">选项4</option>
  </select>
</div>

CSS样式

.input-container {
  position: relative;
  width: 320px;
  margin: 20px;
}

.form-input {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#dropdown-select {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}

JavaScript逻辑

const selectEl = document.getElementById('dropdown-select');
const inputContainer = document.querySelector('.input-container');

// 监听全局按键事件，按下任意键显示Select
document.addEventListener('keydown', () => {
  selectEl.style.display = 'block';
});

// 可选：点击容器外区域隐藏Select
document.addEventListener('click', (e) => {
  if (!inputContainer.contains(e.target)) {
    selectEl.style.display = 'none';
  }
});

// 可选：仅指定按键触发（比如Enter键）
// document.addEventListener('keydown', (e) => {
//   if (e.key === 'Enter') {
//     selectEl.style.display = 'block';
//   }
// });

关键细节说明 #

• 父容器设置position: relative，让Select的绝对定位基于容器边界，确保始终在文本框下方
• 初始通过display: none隐藏Select，按键触发时切换为block显示
• 额外添加的点击外部隐藏逻辑，提升交互完整性，可根据需求取舍

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