Primefaces selectOneMenu ajax事件选择/单击

Question

我正在使用 Primefaces 5.0。我有一个带有 ajax 监听器的 selectOneMenu：

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

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

我在 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

In the selectItem function of the selectOneMenu widget you can see that when the item is selected a condition is present which is sameOption, if it's true the change event won't be triggered.

所以这是设计使然。要覆盖它，您有多个选项，您可以更改selectItem 的原型，其中sameOption 始终被认为是false，这意味着您不必为了简单起见而删除与该选项相关的所有代码倒退，或者你可以永远取消那个选项！

这个例子是我从等式中提取该选项的地方...

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中执行这段代码。