如何为h:selectOneMenu的selectItems选项实现两行显示？

现有如下JSF h:selectOneMenu 组件代码：

<h:selectOneMenu styleClass="classA classB" 
    id="listID"
    required="true" requiredMessage="Required"
    value="#{model.selected}"
    effect="fade"
    hideNoSelectionOption="true"
    disabled="#{empty model.list}">
    <f:selectItem itemValue="#{null}" itemLabel="#{null}" noSelectionOption="true" />
    <f:selectItems value="#{model.list}"/>
    <p:ajax event="change" process="@this" update="listID msgList" />
</h:selectOneMenu>

想让每个可选项显示两行内容（一行名称、一行描述），但尝试拼接'\n'、'
'、'
'以及<br>标签都无效，因为原生<option>标签不支持换行，求可行的实现方案。

原生HTML <option> 确实不支持多行渲染，下面提供几种实用的解决思路：

1. 用PrimeFaces p:selectOneMenu 开启HTML渲染（推荐，若项目已用PrimeFaces） #

PrimeFaces的p:selectOneMenu支持escape="false"属性，允许在选项标签中插入HTML，配合CSS就能实现多行布局：

组件代码修改 #

<p:selectOneMenu styleClass="classA classB multi-line-select" 
    id="listID"
    required="true" requiredMessage="Required"
    value="#{model.selected}"
    effect="fade"
    hideNoSelectionOption="true"
    disabled="#{empty model.list}"
    escape="false"> <!-- 核心：允许解析HTML标签 -->
    <f:selectItem itemValue="#{null}" itemLabel="#{null}" noSelectionOption="true" />
    <!-- 用<br>分隔名称和描述，small标签优化描述样式 -->
    <f:selectItems value="#{model.list}" var="item" 
                   itemLabel="#{item.name}&lt;br/&gt;&lt;small&gt;#{item.description}&lt;/small&gt;" />
    <p:ajax event="change" process="@this" update="listID msgList" />
</p:selectOneMenu>

配套CSS #

/* 调整选项行高和内边距，让多行内容更易读 */
.multi-line-select .ui-selectonemenu-item {
    white-space: pre-line;
    line-height: 1.4;
    padding: 8px 12px;
}
/* 给描述文字设置更小字号和灰色 */
.multi-line-select .ui-selectonemenu-item small {
    font-size: 0.8em;
    color: #666;
}

2. 纯原生JSF方案：CSS配合换行符 #

如果不想替换组件，可在后端用\n拼接名称和描述，再通过CSS强制换行：

后端处理 #

在构造model.list的选项时，将itemLabel设为item.name + '\n' + item.description。

配套CSS #

.classA.classB option {
    white-space: pre-line; /* 识别换行符并换行 */
    line-height: 1.4;
    padding: 4px;
}

注意：这种方式浏览器兼容性一般，部分浏览器对<option>的样式支持有限，效果不如第一种方案稳定。

3. 换用PrimeFaces p:selectMenu 组件 #

如果项目允许更换组件，p:selectMenu支持自定义模板，能完全控制选项的布局：

组件代码 #

<p:selectMenu styleClass="classA classB" 
              id="listID"
              required="true" requiredMessage="Required"
              value="#{model.selected}"
              disabled="#{empty model.list}">
    <f:selectItem itemValue="#{null}" itemLabel="#{null}" noSelectionOption="true" />
    <f:selectItems value="#{model.list}" var="item" itemValue="#{item}" />
    <p:ajax event="change" process="@this" update="listID msgList" />
    <!-- 自定义选项模板，自由布局名称和描述 -->
    <p:template>
        <div class="option-content">
            <div class="option-name">#{item.name}</div>
            <div class="option-desc">#{item.description}</div>
        </div>
    </p:template>
</p:selectMenu>

配套CSS #

.option-content {
    padding: 8px;
}
.option-name {
    font-weight: bold;
}
.option-desc {
    font-size: 0.85em;
    color: #777;
    margin-top: 2px;
}

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