p:selectOneMenu 和未转义的 SelectItem 标签答案

【问题标题】：p:selectOneMenu and unescaped SelectItem labelp:selectOneMenu 和未转义的 SelectItem 标签
【发布时间】：2017-05-23 13:03:59
【问题描述】：

当使用 Primefaces (6.1.1) 中的 SelectOneMenu 并添加一些具有 HTML 格式标签的 SelectItems 时，即使“SelectItem.escape”属性设置为 false（并且，此外，'itemLabelEscaped'-Attribute 也是 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;
}

JSF：

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

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

【问题讨论】：

在现代 jsf 版本中，不再需要创建“SelectItem”对象...

标签： primefaces jsf-2

【解决方案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，选定的标签仍将被转义。

为了逃避Selected Label，请参考以下代码：

脚本

<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>

这将更改窗口加载中的 Selected Label 和 selectOneMenu 的 onfocus 和 onblur 事件。

为什么我使用onfocus 和onblur 而不是onchange？

如果您没有更改/选择项目，则在展开 selectOneMenu 时，使用 onchange 会将选定标签返回为其转义值。

根据您的要求随意使用它。

问候，

【讨论】：

感谢您的回答。我认为，从技术上讲，您是绝对正确的，但是从用户的角度来看，有一个组件并且不会期望，所选值（“选定标签”）必须由客户端脚本操作以看起来与可选值。但这至少是一个很好的解决方法，因此是“接受”检查。再次感谢。
我提到这不是一个错误，但忘了补充说这可能是一个改进。我正要提出一个关于这个的问题，然后偶然发现这个issue 在 5 天前提出的问题与你的问题完全相同。它被标记为缺陷并被设置为 Primefaces 6.2 的里程碑。