如何在PrimeFaces <p:selectOneMenu>中用f:selectItems渲染HTML并避免显示原始代码

我尝试在PrimeFaces的<p:selectOneMenu>组件中，通过<f:selectItems>渲染带颜色块和描述的HTML内容，但HTML未被解析，直接以原始文本形式显示（包含标签、样式代码等）。

现有代码 #

Java（托管Bean） #

public String coresComHtml(Cor cor) {
    if (cor == null) {
        return "";
    }

    String html = String.format(
            "<div style='display: flex; align-items: center;'>"
                    + "<div style='width: 20px; height: 20px; background-color: %s; border: 1px solid #000; margin-right: 5px;'></div>"
                    + "<span>%s</span>"
                    + "</div>",
            cor.getHexadecimal(), cor.getDescricao());

    return html;
}

XHTML #

<div class="col-12 col-sm-6">
    <div class="form-group">
        <p:outputLabel value="Código da Cor"  
                        for="codigo_da_cor" />

        <p:selectOneMenu id="codigo_da_cor" 
                            value="#{MB.dataView.entidade.idCor}" 
                            styleClass="width100"
                            label="#{sessionMB.getLabelObservacao('label_cor')}">
            
            <f:selectItem itemLabel="" itemValue="" />
            
            <f:selectItems value="#{MB.dataView.cores}" 
                            var="item" 
                            itemValue="#{item.id}">

                <f:facet name="itemLabel">
                    <h:outputText value="#{MB.dataView.coresComHtml(item)}" 
                                    escape="false" />
                </f:facet>
            </f:selectItems>
        </p:selectOneMenu>
    </div>
</div>

问题细节 #

预期下拉选项显示颜色块+描述文本，但实际显示原始HTML代码。已设置<h:outputText>的escape="false"，且确认生成的HTML字符串格式正确，仍无法正常渲染。

解决方法 #

PrimeFaces的<p:selectOneMenu>默认不会解析itemLabel中的HTML，需通过自定义下拉内容实现，步骤如下：

1. 给<p:selectOneMenu>添加filter="false"（若无需过滤功能），移除原<f:facet name="itemLabel">代码块。
2. 在<p:selectOneMenu>内部添加<p:column>，直接定义每个选项的自定义内容，无需拼接HTML字符串。

修改后的XHTML代码：

<div class="col-12 col-sm-6">
    <div class="form-group">
        <p:outputLabel value="Código da Cor" for="codigo_da_cor" />

        <p:selectOneMenu id="codigo_da_cor" 
                         value="#{MB.dataView.entidade.idCor}" 
                         styleClass="width100"
                         label="#{sessionMB.getLabelObservacao('label_cor')}"
                         filter="false">
            
            <f:selectItem itemLabel="" itemValue="" />
            
            <f:selectItems value="#{MB.dataView.cores}" 
                           var="item" 
                           itemValue="#{item.id}" />
            
            <!-- 自定义下拉选项内容 -->
            <p:column>
                <div style="display: flex; align-items: center;">
                    <div style="width: 20px; height: 20px; background-color: #{item.hexadecimal}; border: 1px solid #000; margin-right: 5px;"></div>
                    <span>#{item.descricao}</span>
                </div>
            </p:column>
        </p:selectOneMenu>
    </div>
</div>

同时可移除托管Bean中拼接HTML的coresComHtml方法，直接在XHTML中引用实体属性即可，既简洁又避免HTML拼接的潜在问题。

原理说明 #

• 当<p:selectOneMenu>使用<p:column>定义内容时，会渲染自定义下拉列表（而非原生<select>元素），支持直接渲染HTML组件和内联样式。
• 该方式无需手动拼接HTML字符串，也不需要设置escape="false"，完全符合JSF的开发规范。

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