primefaces - 在 selectonemenu 中选择值后立即显示对话框

Question

当我在 dataTable 中使用时，我对 p:selectonemenu 有一个要求。

<p:selectOneMenu value="#{buyerInProcessBean.subject}"
                            id="buyerResponseId" >
                            <f:selectItems
                                value="#{buyerInProcessBean.subjectMap[trans.decisionrule.ruleId]}"
                                var="subject" itemLabel="#{subject}" itemValue="#{subject}"></f:selectItems>
                            <f:selectItem itemLabel="Other" itemValue="Other"></f:selectItem>
                        </p:selectOneMenu>

如果我选择“其他”，则必须强制弹出对话。否则不是强制性的。

我怎样才能达到这种要求？

Answer 1

您应该将函数绑定到onchange您的事件<p:selectOneMenu>，找出所需选项的值是否与应打开对话框的值匹配，并dialog.open()在这种情况下触发。

请注意，Primefaces 的组件将<select>标签包装在一些 div 中并<option>在中间组件中输出所选内容，因此将事件附加到隐藏<select>元素将不起作用。另一方面，例如，JSF<h:selectOneMenu>标记呈现一个<select>元素，因此将行为绑定到该元素onchange将触发所需的行为。

风景：

<h:form id="form">
    <p:selectOneMenu value="#{buyerInProcessBean.subject}" id="buyerResponseId" onchange="changeEvent(this)">
        <f:selectItems value="#{buyerInProcessBean.subjectMap[trans.decisionrule.ruleId]}" 
                       var="subject" itemLabel="#{subject}" itemValue="#{subject}" />
        <f:selectItem itemLabel="Other" itemValue="Other" />
    </p:selectOneMenu>
</h:form>
<p:dialog widgetVar="dialog">
    <h:outputText value="Additional Data" />
</p:dialog>

JavaScript：

function changeEvent(element) {
    var val = $(element).find('option:selected').text();
    if(val === 'Other') {
        dialog.show();
    }
}