2015-06-18 5 views
1

enter image description hereизменить выбранный текстовый элемент из primefaces selectonemenu

Метка SelectItem объединяется значением элемента и текста описания. Если я выберу элемент, вся itemLabel будет отображаться в текстовом поле. Я хотел бы изменить это, текстовое поле должно отображать только ItemValue выбранного элемента, а не метки. Поэтому вместо «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> 

.

+0

Не могли бы вы разместить код текстового поля, в котором вы отобразите выбранный элемент? –

+0

текстовое поле создается с помощью меток selectOneMenu – dontcare

ответ

2

Я думаю, что единственный способ изменить стиль CSS с помощью JS. Я приведу пример:

<!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> 
+0

Как вы полагаете, что это работает для сохранения значений в режиме редактирования/обновления? –

1

Вы можете достичь этого с помощью <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 является то, что будет показано в «текстовое поле», как вы это называете, и <p:column> является то, что будет отображаться в меню. Здесь нет необходимости в обходных методах, основанных на JS. Если вы еще не в PrimeFaces 5+, вам нужен дополнительный атрибут layout="custom" на <p:selectOneMenu>.

У этого есть только немного другой стиль (границы и т. Д.), Но с этим можно легко позаботиться с помощью CSS.

+0

Что делать, если я использую 'SelectItemGroup' с элементами? –

Смежные вопросы