Question

enter image description here

selectItem的标签由项值和描述文本组合而成。如果我选择一个项目，则整个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>

Answer 1

我认为唯一的方法是用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>

Answer 2

您可以使用<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将显示在＆＃34;文本框＆＃34;当你调用它时，<p:column>将显示在菜单中。这里不需要基于JS的解决方法。如果您尚未使用PrimeFaces 5+，那么您需要layout="custom"上的其他<p:selectOneMenu>属性。

它只有一点点不同的风格（边框等），但在CSS镜头的帮助下可以很容易地处理它。

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

2 个答案: