从 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 的镜头轻松解决。
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 的镜头轻松解决。