Primefaces p:SelectOne菜单和未切换的SelectItem标签

使用Primefaces（6.1.1）中的SelectOneMenu并添加一些具有HTML格式标签的SelectItems时，组件的选定项显示转义HTML，即使“SelectItem.escape”属性设置为false（此外，“itemLabelEscaped”属性也为false）。 保存可选项的下拉列表将正确呈现

支持bean示例：

public List<SelectItem> formattedSelectItems() {
    List<SelectItem> items = new ArrayList<>();
    for (int i = 100; i < 103; i++) {
        items.add(new SelectItem(i, "<u>" + i + "</u>", "", false, false));
    }
    return items;
}

public List formattedSelectItems（）{
列表项=新建ArrayList（）；
对于（int i=100；i<103；i++）{
添加（新选择项（i，“+i+”，“”，false，false））；
}
退货项目；
}

JSF：

这是一个错误还是我做错了什么？谢谢你的帮助。

这不是一个bug

您可能将SelectItem的标签与所选标签混淆（参见下图）

呈现的HTML如下所示：

<div class="ui-selectonemenu ui-widget ui-state-default ui-corner-all"
    id="form:oneMenu" style="min-width: 47px;">
    <div class="ui-helper-hidden-accessible">
        <input name="form:oneMenu_focus" class="mb-user-select-none"
            id="form:oneMenu_focus" role="combobox" aria-disabled="false"
            aria-expanded="false" aria-haspopup="true"
            aria-describedby="form:oneMenu_2"
            aria-activedescendant="form:oneMenu_2"
            aria-owns="form:oneMenu_items" aria-autocomplete="list"
            onfocus="changeSelectedLabel()" onblur="changeSelectedLabel()" type="text"
            autocomplete="off">
    </div>
    <div class="ui-helper-hidden-accessible">
        <select name="form:oneMenu_input" tabindex="-1"
            id="form:oneMenu_input" data-p-hl="onemenu">
                        <option value="100">100</option>
            <option value="101">101</option>
            <option value="102">102</option></select>
    </div>
    <label class="ui-selectonemenu-label ui-inputfield ui-corner-all" id="form:oneMenu_label"><u>102</u></label>
    <div
        class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
        <span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
    </div>
</div>

选择一个功能表

<p:selectOneMenu id="oneMenu" onfocus="changeSelectedLabel()" onblur="changeSelectedLabel()">
    <f:selectItems value="#{selectOneTestController.formattedSelectItems()}" itemLabelEscaped="false"/>
</p:selectOneMenu>

这将更改窗口加载中选定的标签，并选择一个菜单的

onfocus

和

onblur

事件

为什么我使用

onfocus

和

onblur

而不是

onchange

如果您没有更改/选择项目，则在展开SelectOne菜单时，使用

onchange

将所选标签返回其转义值

您可以根据自己的需要随意使用它

这不是一个bug

您可能将SelectItem的标签与所选标签混淆（参见下图）

呈现的HTML如下所示：

<div class="ui-selectonemenu ui-widget ui-state-default ui-corner-all"
    id="form:oneMenu" style="min-width: 47px;">
    <div class="ui-helper-hidden-accessible">
        <input name="form:oneMenu_focus" class="mb-user-select-none"
            id="form:oneMenu_focus" role="combobox" aria-disabled="false"
            aria-expanded="false" aria-haspopup="true"
            aria-describedby="form:oneMenu_2"
            aria-activedescendant="form:oneMenu_2"
            aria-owns="form:oneMenu_items" aria-autocomplete="list"
            onfocus="changeSelectedLabel()" onblur="changeSelectedLabel()" type="text"
            autocomplete="off">
    </div>
    <div class="ui-helper-hidden-accessible">
        <select name="form:oneMenu_input" tabindex="-1"
            id="form:oneMenu_input" data-p-hl="onemenu">
                        <option value="100">100</option>
            <option value="101">101</option>
            <option value="102">102</option></select>
    </div>
    <label class="ui-selectonemenu-label ui-inputfield ui-corner-all" id="form:oneMenu_label"><u>102</u></label>
    <div
        class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
        <span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
    </div>
</div>

选择一个功能表

<p:selectOneMenu id="oneMenu" onfocus="changeSelectedLabel()" onblur="changeSelectedLabel()">
    <f:selectItems value="#{selectOneTestController.formattedSelectItems()}" itemLabelEscaped="false"/>
</p:selectOneMenu>

这将更改窗口加载中选定的标签，并选择一个菜单的

onfocus

和

onblur

事件

为什么我使用

onfocus

和

onblur

而不是

onchange

如果您没有更改/选择项目，则在展开SelectOne菜单时，使用

onchange

将所选标签返回其转义值

您可以根据自己的需要随意使用它

---

关于，

在现代jsf版本中，不再需要创建“SelectItem”对象……在现代jsf版本中，不再需要创建“SelectItem”对象……感谢您的回答。我认为，从技术上看，您是绝对正确的，但从用户的角度来看，有一个组件是您不希望看到的，即所选值（“所选标签”）必须由客户端脚本操纵，以使其看起来与所选值相同。但这至少是一个很好的解决办法，因此需要“接受”检查。再次感谢。我提到这不是一个bug，但忘记补充说这可能是一个改进。我正要提交一个关于这个问题的文件，但5天前我无意中提交了一个与你的问题完全相同的文件。它被标记为缺陷，并被设置为Primefaces 6.2的里程碑。感谢您的回答。我认为，从技术上看，您是绝对正确的，但从用户的角度来看，有一个组件是您不希望看到的，即所选值（“所选标签”）必须由客户端脚本操纵，以使其看起来与所选值相同。但这至少是一个很好的解决办法，因此需要“接受”检查。再次感谢。我提到这不是一个bug，但忘记补充说这可能是一个改进。我正要提交一个关于这个问题的文件，但5天前我无意中提交了一个与你的问题完全相同的文件。它被标记为缺陷，并被设定为Primefaces 6.2的里程碑。