如何限制<g:select>多选数量为1且保持列表展示而非下拉？

我完全理解你的需求——想要让选项始终以完整列表的形式展示（而非下拉菜单），但又只能选择其中一项，可Grails的<g:select>本身并没有提供限制最大选择数的属性，对吧？这里有两个可行的方案供你选择：

方案一：保留multiple属性，用JavaScript限制单选 #

既然<g:select>只有设置multiple="multiple"才会显示完整列表，那我们可以保留这个属性，再通过前端JS来强制限制只能选中一个选项。

修改你的GSP代码如下：

<div class="field ${hasErrors(bean: cmd, field: 'subtypes', 'error')}">
    <label for="subtypes">
        <g:message code="requestSRO.requestSubtype.label"/>
    </label>
    <g:select name="subtypes" 
              from="${requestSubtypes}" 
              optionKey="code" 
              multiple="multiple" 
              optionValue="description" 
              value="${cmd?.subtypes}" 
              style="width: 100%;height: 100px" 
              disabled="${!requestSubtypes ? true: false}"
              onchange="limitSingleSelection(this)"/>
</div>

<script>
function limitSingleSelection(selectElement) {
    const selectedItems = Array.from(selectElement.selectedOptions);
    // 如果选中数量超过1，取消除最后一个外的所有选中项
    if (selectedItems.length > 1) {
        selectedItems.slice(0, -1).forEach(item => item.selected = false);
    }
}
</script>

说明： #

• 保留multiple属性确保控件以列表形式展示
• 监听onchange事件，当用户选中多个选项时，自动取消之前的选中状态，只保留最后一次选择的项
• 后端接收参数时，因为控件是multiple类型，参数会以数组形式传递，你只需取数组的第一个元素即可（因为我们已经限制了只能选一个）

方案二：用<g:radio>模拟列表样式（无JS依赖） #

如果你不想依赖JavaScript，可以用Grails的<g:radio>标签循环生成单选按钮，再通过CSS样式把它们包装成类似列表的样子，原生支持单选且能展示所有选项。

代码示例：

<div class="field ${hasErrors(bean: cmd, field: 'subtypes', 'error')}">
    <label for="subtypes">
        <g:message code="requestSRO.requestSubtype.label"/>
    </label>
    <!-- 用容器模拟select列表的外观 -->
    <div style="width: 100%; height: 100px; overflow-y: auto; border: 1px solid #ccc; padding: 4px;"
         ${!requestSubtypes ? 'aria-disabled="true" style="opacity: 0.6;"' : ''}>
        <g:each in="${requestSubtypes}" var="subtype">
            <div style="margin-bottom: 4px;">
                <g:radio name="subtypes" 
                         value="${subtype.code}" 
                         checked="${cmd?.subtypes?.contains(subtype.code)}"/>
                <label style="margin-left: 6px;">${subtype.description}</label>
            </div>
        </g:each>
    </div>
</div>

说明： #

• 用<g:each>循环遍历所有选项，生成对应的单选按钮和标签
• 外层容器通过CSS设置固定高度、滚动条和边框，模拟原生多选列表的视觉效果
• 原生单选按钮天然支持只能选一项的规则，无需额外脚本控制
• 如果需要禁用状态，给容器添加半透明样式和aria-disabled属性增强可访问性

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