Question

我们如何使用JavaScript / jQuery获取PrimeFaces <p:selectOneMenu>的选定值？

我试图以这种方式得到它，但如果条件没有进入，这意味着元素的ID不正确。

<h:head> 
    <script> 
        function showDialog() { 
            alert("insdie function"); 
            if($('#someSelect').val() == 'India') { 
                dlg.show(); 
                alert("after function"); 
            } 
            alert("outside function"); 
        }   
    </script> 
</h:head> 
<h:body> 
    <h:form> 
        <p:panel> 
            <h:panelGrid columns="2"> 
                <p:selectOneMenu 
                    id="someSelect" 
                    value="#{testController.countryName}" 
                    <f:selectItem itemLabel="Select One" itemValue="" /> 
                    <f:selectItems value="#{addPatientProfileBB.patStatusSelect}" 
                        itemLabel="#{testController.countryName}" 
                        itemValue="#{testController.countryNameId}" /> 
                    <p:ajax process="someSelect" update="dialog" oncomplete="showDialog()"/> 
                </p:selectOneMenu> 
            </h:panelGrid> 

            <p:dialog id="dialog" header="Login" widgetVar="dlg"> 
                <h:form> 
                    <h:panelGrid columns="2" cellpadding="5"> 
                        <h:outputLabel for="username" value="Username:" /> 
                        <p:inputText id="username" required="true" label="username" /> 
                    </h:panelGrid> 
                </h:form> 
            </p:dialog> 
        </p:panel>  
    </h:form> 
</h:body>

Answer 1

JSF在webserver上运行并生成HTML，并将其发送到webbrowser。 JavaScript / jQuery在webbrowser上运行，并没有看到任何JSF源代码，只看到了它的HTML输出。

在浏览器中打开页面，右键单击查看源（or here on PrimeFaces showcase site）。您会看到实际<select>元素的前缀为<h:form>的ID，后缀为_input（因为<p:selectOneMenu>基本上会生成<div><ul><li>用普通的<select>来实现花哨的look'n'feel，因此它被隐藏了。）

所以，如果你给父表单一个固定的ID（这样JSF不会自动生成一个），那么下面的JSF代码

<h:form id="form">
    <p:selectOneMenu id="someSelect" ...>

将生成HTML <select>，如下所示：

<select id="form:someSelect_input">

您需要使用完全该ID，而不是从DOM中获取元素。

$("#form\\:someSelect_input");

或

$("[id='form:someSelect_input']");

另见：

How to select JSF components using jQuery?

对于具体问题

无关，您<p:dialog>还有另一个问题。它包含另一个<h:form>，因此您可以在HTML中有效地嵌套illegal形式！将整个<p:dialog> 放在表单之外：

<h:form>
    <p:selectOneMenu ... />
</h:form>
<p:dialog>
    <h:form>
        ...
    </h:form>
</p:dialog>

Answer 2

尝试更改

if($('#someSelect').val() == 'India') {

到

if($("select[name$='someSelect_input'] option:selected").val() == 'India') {

修改

您可以通过更改
来改进选择器
name$='someSelect_input'

到

name='yourFormName\\:someSelect_input'

Answer 3

我的朋友们。我找到了以下解决方案。

<h:head> 
    <script> 
        function showDialog() {
            alert(PF('selectWV').getSelectedValue());
            if (PF('selectWV').getSelectedValue() == "b") {
                PF('buttonWV').jq.show();
            } else {
                PF('buttonWV').jq.hide();
            }
        }  
    </script> 
</h:head> 
<h:body> 
    <h:form> 
        <p:panel> 
            <h:panelGrid columns="2"> 
                <h:form>
            <p:selectOneMenu style="width:150px" id="id" widgetVar="selectWV">  
                <f:selectItem itemLabel="Select" itemValue="a"></f:selectItem>
                <f:selectItem itemLabel="Other" itemValue="b"></f:selectItem>
                <p:ajax process="id" update="dos" oncomplete="showDialog()"/>
            </p:selectOneMenu>
            <p:commandButton value="Register" widgetVar="buttonWV"
                style="display: none" />
        </h:form>
            </h:panelGrid> 
        </p:panel>  
    </h:form> 
</h:body>

使用primefaces中的javascript从selectOnemenu中获取选定值并打开一个对话框

3 个答案:

另见：