p：selectOneMenu和未转义的SelectItem标签

Question

当使用Primefaces的SelectOneMenu（6.1.1）并添加一些具有HTML格式标签的SelectItem时，组件的选定项目显示转义的HTML，即使'SelectItem.escape'属性设置为false（和，另外，'itemLabelEscaped'-Attribute也是假的）。 保存可选项的下拉列表正确呈现。

支持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;
}

JSF：

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

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

Answer 1

这不是错误。

您可能会混淆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>

为选定标签呈现label。 （参见SelectOneMenuRenderer＃encodeLabel）
因此，即使您将SelectItem.escape属性设置为false或添加itemLabelEscaped="false" f:selectItems属性， 选定的标签仍将被转义。

要转义选定标签，请参阅以下代码：

<强>脚本

<script type="text/javascript">
    function changeSelectedLabel() {
        console.log('change!!');
        var label = $("label[id='form:oneMenu_label']");
        var text = label.text();
        label.text("");
        label.append(text);
    }

    $(window).bind("load", function() {
        changeSelectedLabel();
    });
</script>

<强> selectOneMenu用于

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

这将更改窗口加载中的选定标签，并选择OneMenu的onfocus和onblur事件。

为什么我使用onfocus和onblur代替onchange？

如果您未更改/选择某个项目，则在展开selectOneMenu时，使用onchange会将所选标签返回到其转义值。

根据您的要求，随意玩这个。

此致