选择/点击Primefaces selectOneMenu ajax事件

Question

我正在使用Primefaces 5.0。我有一个selectOneMenu，里面有ajax监听器：

<p:selectOneMenu value="#{mybean.myselection}" > 
    <f:selectItems value="#{mybean.mylist}" /> 
    <p:ajax listener="#{mybean.test}" /> 
</p:selectOneMenu> 

每当值改变时都会调用监听器。这工作正常。但是我还需要一个像“select”或“click”这样的事件，当点击选定的项目时也会触发一个动作。

我在PF UserGuide中找不到活动。是否有捷径可寻？

编辑： 添加Javascript函数。

<h:form> 
    <p:selectOneMenu value="#{mybean.myselection}" widgetVar="mySelect"> 
     <f:selectItems value="#{mybean.mylist}" /> 
     <p:ajax listener="#{mybean.test}" /> 
    </p:selectOneMenu> 
    <h:form> 

<script> 
      //<![CDATA[ 
      $(document) 
        .ready(
          function() { 
           PF('mySelect').selectItem = function(item, 
             silent) { 
            var selectedOption = this.options.eq(this 
              .resolveItemIndex(item)), currentOption = this.options 
              .filter(':selected'), shouldChange = null; 

            if (this.cfg.editable) { 
             shouldChange = (selectedOption.text() != this.label 
               .val()); 
            } else { 
             shouldChange = true; 
            } 

            if (shouldChange) { 
             this.highlightItem(item); 
             this.input.val(selectedOption.val()) 

             this.triggerChange(); 

             if (this.cfg.editable) { 
              this.customInput = false; 
             } 
            } 

            if (!silent) { 
             this.focusInput.focus(); 
            } 

            if (this.panel.is(':visible')) { 
             this.hide(); 
            } 
           } 
          }) 
      //]]> 
     </script> 

Answer 1

在selectOneMenu部件的selectItem功能，你可以看到，该项目被选中时的情况存在是sameOption，如果这是真的改变事件将不会被触发。

所以这是设计。若要覆盖此选项，您可以更改selectItem的原型，其中sameOption始终被认为是false，这意味着您不必为了简化后退而删除与该选项相关的所有代码，也可以永远拿出这个选项！

这个例子是我TOKE从方程选项...

PrimeFaces.widget.SelectOneMenu.prototype.selectItem = function(item, silent) { 
    var selectedOption = this.options.eq(this.resolveItemIndex(item)), 
    //sameOption = selectedOption.val() == currentOption.val() | or make it false | 
    currentOption = this.options.filter(':selected'), 
    shouldChange = null; 

    if(this.cfg.editable) { 
     shouldChange = (selectedOption.text() != this.label.val()); //changes done here, see original function 
    } 
    else { 
     shouldChange = true; 
    } 

    if(shouldChange) { 
     this.highlightItem(item); 
     this.input.val(selectedOption.val()) 

     this.triggerChange(); 

     if(this.cfg.editable) { 
      this.customInput = false; 
     } 
    } 

    if(!silent) { 
     this.focusInput.focus(); 
    } 

    if(this.panel.is(':visible')) { 
     this.hide(); 
    } 
} 

现在改变了整个对象的原型可能不是你的情况，如果你想这种行为的具体selectOneMenu用于你可能会改变只有这样的功能：

PF('selectOneMenuWidgetVarName').selectItem = function(item, silent) { 
    var selectedOption = this.options.eq(this.resolveItemIndex(item)), 
    currentOption = this.options.filter(':selected'), 
    shouldChange = null; 

    if(this.cfg.editable) { 
     shouldChange = (selectedOption.text() != this.label.val()); 
    } 
    else { 
     shouldChange = true; 
    } 

    if(shouldChange) { 
     this.highlightItem(item); 
     this.input.val(selectedOption.val()) 

     this.triggerChange(); 

     if(this.cfg.editable) { 
      this.customInput = false; 
     } 
    } 

    if(!silent) { 
     this.focusInput.focus(); 
    } 

    if(this.panel.is(':visible')) { 
     this.hide(); 
    } 
} 

即使选择了相同的值，也会触发更改事件。 你需要在$(document).ready执行此代码。