Jsf 2 当另一个字段更改时更新该字段

我确信有不止一种方法可以做到这一点，但是当另一个JSF/PrimeFaces组件发生变化时，更新一个JSF/PrimeFaces组件的好方法是什么呢

我有一个滑块，可以用它的值（包括支持bean中的值）正确地更新输入字段。但该值是一个数字，我想将其显示为文本值，例如，如果它是1，我想显示“Easy”，如果它是4，则显示“Hardward”

通过隐藏存储数值的输入字段，我使其部分工作。然后我添加了另一个“可见”outputLabel，它链接到我的支持bean中的getter，该getter将数字转换为文本值

但我不知道如何说“当隐藏字段的值更改时，刷新outputLabel中显示的值”

当然，这与valueChangeListeners或“更新”属性有关，但很难将其整合在一起

有人能给我指点迷津的方向吗？虽然我已经尝试过，但我甚至不太确定谷歌应该做什么

---

谢谢

使用Javascript

onchange

事件，只需使用所需的标签更新标签即可

或者。。您可以使用primefaces

onSlidend

事件

valueChangeListeners将一直运行到支持bean，然后返回到客户端

基于此,

我有一个滑块，可以用它的 值（包括支持bean中的值）。但这一价值观是一个错误 数字，并且我希望将其显示为文本值，例如，如果它是1，I 想要显示“容易”，如果是4，则显示“困难”

您只需要一个JavaScript onchange事件并更新标签

下面是一个例子（我没有测试它或检查语法，但它应该会给你一个想法） 用户第一次进入时，可以从服务器或客户端初始化标签，就像为滑块设置默认值一样

  <script>
      var labelElement = document.getElementById('output');
      var sliderElement = document.getElementById('txt2');

      function updateSliderLabel(){
         if(sliderElement.value > 75){
              labelElement.value = "Large";
         } else if(sliderElement.value > 50){
              labelElement.value = "Avg";
         } else {
              labelElement.value = "Small";
         }

      }
  </script>

  <h:form id="form">
    <h:panelGrid columns="1" style="margin-bottom:10px">  
        <h:panelGroup>  
            <h:outputText value="Set ratio to "/>  
            <h:outputText id="output" value="#{sliderBean.number2}"/>  
        </h:panelGroup>   

        <h:inputHidden id="txt2" value="#{sliderBean.number2}" />  
        <p:slider onSlideEnd="updateSliderLabel()" for="txt2" display="output" style="width:200px" />  
    </h:panelGrid>
  </h:form> 

var labelement=document.getElementById（'output'）；
var sliderElement=document.getElementById（'txt2'）；
函数updateSliderLabel（）{
如果（sliderElement.value>75）{
labelement.value=“大”；
}否则如果（sliderElement.value>50）{
labelement.value=“平均值”；
}否则{
labelement.value=“小”；
}
}

使用Javascript

onchange

事件，只需使用所需的标签更新标签即可

或者。。您可以使用primefaces

onSlidend

事件

valueChangeListeners将一直运行到支持bean，然后返回到客户端

基于此,

我有一个滑块，可以用它的 值（包括支持bean中的值）。但这一价值观是一个错误 数字，并且我希望将其显示为文本值，例如，如果它是1，I 想要显示“容易”，如果是4，则显示“困难”

您只需要一个JavaScript onchange事件并更新标签

下面是一个例子（我没有测试它或检查语法，但它应该会给你一个想法） 用户第一次进入时，可以从服务器或客户端初始化标签，就像为滑块设置默认值一样

  <script>
      var labelElement = document.getElementById('output');
      var sliderElement = document.getElementById('txt2');

      function updateSliderLabel(){
         if(sliderElement.value > 75){
              labelElement.value = "Large";
         } else if(sliderElement.value > 50){
              labelElement.value = "Avg";
         } else {
              labelElement.value = "Small";
         }

      }
  </script>

  <h:form id="form">
    <h:panelGrid columns="1" style="margin-bottom:10px">  
        <h:panelGroup>  
            <h:outputText value="Set ratio to "/>  
            <h:outputText id="output" value="#{sliderBean.number2}"/>  
        </h:panelGroup>   

        <h:inputHidden id="txt2" value="#{sliderBean.number2}" />  
        <p:slider onSlideEnd="updateSliderLabel()" for="txt2" display="output" style="width:200px" />  
    </h:panelGrid>
  </h:form> 

var labelement=document.getElementById（'output'）；
var sliderElement=document.getElementById（'txt2'）；
函数updateSliderLabel（）{
如果（sliderElement.value>75）{
labelement.value=“大”；
}否则如果（sliderElement.value>50）{
labelement.value=“平均值”；
}否则{
labelement.value=“小”；
}
}

我认为使用基于PrimeFaces的解决方案比使用基于JavaScript的解决方案容易得多。 所以，在我的例子中，我使用了这个，它对我很有效

SliderBean：

package ma.klagrida;

import javax.faces.bean.ManagedBean;


import org.primefaces.event.SlideEndEvent;

@ManagedBean
public class SliderBean {

    private int number;

    private String category = "Start";

    public int getNumber() {
        return number;
    }

    public void setNumber(int number) {
        this.number = number;
    }


    public String getCategory() {
        return category;
    }

    public void setCategory(String category) {
        this.category = category;
    }

    public void onSlideEnd(SlideEndEvent event) {
        int value = event.getValue();
        if(value > 0 && value <= 50) {
            category = "Easy";
         } else if(value > 50 && value <= 100) {
            category = "Difficult";
         } else {
                category = "Start";
         } 
    }

}

包ma.klagrida；
导入javax.faces.bean.ManagedBean；
导入org.primefaces.event.slidendevent；
@ManagedBean
公共类SliderBean{
私有整数；
私有字符串category=“Start”；
public int getNumber（）{
返回号码；
}
公共无效集合号（整数）{
这个数字=数字；
}
公共字符串getCategory（）{
退货类别；
}
公共无效集合类别（字符串类别）{
this.category=类别；
}
滑道上的公共无效（SlideEndEvent事件）{
int value=event.getValue（）；
如果（value>0&&value 50&&value，我认为使用基于PrimeFaces的解决方案比使用基于JavaScript的解决方案容易得多。
所以，在我的例子中，我使用了这个，它对我很有效

SliderBean：

package ma.klagrida;

import javax.faces.bean.ManagedBean;


import org.primefaces.event.SlideEndEvent;

@ManagedBean
public class SliderBean {

    private int number;

    private String category = "Start";

    public int getNumber() {
        return number;
    }

    public void setNumber(int number) {
        this.number = number;
    }


    public String getCategory() {
        return category;
    }

    public void setCategory(String category) {
        this.category = category;
    }

    public void onSlideEnd(SlideEndEvent event) {
        int value = event.getValue();
        if(value > 0 && value <= 50) {
            category = "Easy";
         } else if(value > 50 && value <= 100) {
            category = "Difficult";
         } else {
                category = "Start";
         } 
    }

}

包ma.klagrida；
导入javax.faces.bean.ManagedBean；
导入org.primefaces.event.slidendevent；
@ManagedBean
公共类SliderBean{
私有整数；
私有字符串category=“Start”；
public int getNumber（）{
返回号码；
}
公共无效集合号（整数）{
这个数字=数字；
}
公共字符串getCategory（）{
退货类别；
}
公共无效集合类别（字符串类别）{
this.category=类别；
}
滑道上的公共无效（SlideEndEvent事件）{
int value=event.getValue（）；
如果（value>0&&value 50&&value非常好，谢谢你。我想得太多了（我想我必须使用一些奇特的非Javascript方法来实现它，这是JSF的新功能）。你的示例非常好。我唯一需要更改的是添加一个'prepenId=“false”'属性，因为我的'txt2'元素的id类似于j_idt22:txt2，在我这样做之前，我无法通过id获取元素。现在效果很好，非常感谢。非常好，谢谢。我想得太多了（我想我必须使用一些奇特的非Javascript方法来完成我的任务）