Bootstrap 5：实现显示全部选项但仅允许单选的form-select

方法1：利用原生size属性（最简单） #

原生<select>标签的size属性可以直接实现你的需求——设置值为选项总数，就能让所有选项展开显示，同时保持单选行为：

<select class="form-select" size="2">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

• 行为逻辑：和普通单选select完全一致，只能选中一项，表单提交时仅返回单个选中值
• 外观表现：直接展开所有选项，无需点击下拉，和multiple属性的展示效果一致
• 小提示：如果选项数量后续会变动，可以用JS动态设置size为select.options.length，避免手动修改数值。

方法2：自定义单选列表（样式更灵活） #

如果原生select的样式无法满足需求，可自定义HTML结构模拟列表，自己实现单选逻辑，完全控制外观细节：

<div class="form-select-custom">
  <div class="option-item active">Option 1</div>
  <div class="option-item">Option 2</div>
  <!-- 隐藏input用于表单提交时传递选中值 -->
  <input type="hidden" name="selected-option" value="Option 1">
</div>

<style>
.form-select-custom {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  max-height: 160px;
  overflow-y: auto;
}
.option-item {
  padding: 0.375rem 0.75rem;
  cursor: pointer;
}
.option-item.active {
  background-color: #0d6efd;
  color: #fff;
}
.option-item:hover {
  background-color: #e9ecef;
}
</style>

<script>
const optionItems = document.querySelectorAll('.option-item');
const hiddenInput = document.querySelector('input[name="selected-option"]');

optionItems.forEach(item => {
  item.addEventListener('click', () => {
    // 清除所有选项的选中状态
    optionItems.forEach(i => i.classList.remove('active'));
    // 标记当前选项为选中状态
    item.classList.add('active');
    // 更新隐藏input的数值
    hiddenInput.value = item.textContent;
  });
});
</script>

• 优势：可以完全自定义选中状态、hover效果等样式，不受原生组件的样式限制
• 注意：必须通过隐藏的<input>存储选中值，确保表单提交时能正常传递数据

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