从 primefaces selectonemenu 更改选定的项目文本

change selected item text from primefaces selectonemenu

select项目的标签由项目值和描述文本组合而成。如果我 select 一个项目,整个 itemLabel 将显示在文本框中。我想改变这一点,文本框应该只显示 selectedItem 的 itemValue 而不是 Label。所以不是“0 - Variante #0”只有“0”。

我如何填写菜单:

<p:selectOneMenu id="z2Menu" value="#{createCarProject.z2}">                     
   <f:selectItem itemLabel="" itemValue="" />
   <f:selectItems value="#{createCarProject.z_list}" var="i" itemLabel="#{i.value} - #{i.label}" itemValue="#{i.value}"/>
</p:selectOneMenu>

.

我认为唯一的办法就是用 JS 改变 CSS 样式。我举个例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <script>
        function changeLabel(select) {
            if (select.value != '')
                $(".ui-selectonemenu-label").text(select.value);
        }
    </script>
</h:head>

<h:body>
    <h:form id="form">
        <p:selectOneMenu id="console" value="#{dumpController.message}"
            style="width:125px" onchange="changeLabel(this)">
            <f:selectItem itemLabel="Select One" itemValue="" />
            <f:selectItem itemLabel="Xbox One" itemValue="1" />
            <f:selectItem itemLabel="PS4" itemValue="2" />
            <f:selectItem itemLabel="Wii U" itemValue="3" />
        </p:selectOneMenu>
    </h:form>
</h:body>
</html>

您可以通过 <p:selectOneMenu var> 实现。

<p:selectOneMenu ... var="item">
    <f:selectItems value="#{bean.items}" var="item" itemLabel="#{item.value}" />
    <p:column>#{item.value} - #{item.label}</p:column>
</p:selectOneMenu>

itemLabel 将显示在 "textbox" 中,如您所称,<p:column> 将显示在菜单中。这里不需要基于 JS 的解决方法。如果您还没有使用 PrimeFaces 5+,那么您需要在 <p:selectOneMenu>.

上添加一个额外的 layout="custom" 属性

它只有一点点不同的风格(边框等),但是可以通过 CSS 的镜头轻松解决。