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

Question

How can we get the selected value of PrimeFaces <p:selectOneMenu> using JavaScript/jQuery?

I am trying to get it this way, but it does not go inside if condition, which means that the ID of the element is not correct.

<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 runs on webserver and generates HTML which get sent to webbrowser. JavaScript/jQuery runs on webbrowser and doesn't see anything of the JSF source code, but only its HTML output.

Open the page in browser, rightclick and View Source ( or here on PrimeFaces showcase site ). You'll see that the actual <select> element has the ID of the parent <h:form> prepended and the word _input suffixed (because the <p:selectOneMenu> basically generates a <div><ul><li> to achieve the fancy look'n'feel which isn't possible with a plain <select> , thus it's been hidden away).

So, if you give the parent form a fixed ID (so that JSF doesn't autogenerate one), then the following JSF code

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

will generate the HTML <select> as follows:

<select id="form:someSelect_input">

You need to use exactly that ID instead to grab the element from DOM.

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

or

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

See also:

• How to select JSF components using jQuery?

---

Unrelated to the concrete problem, you've there another problem with that <p:dialog> . It contains another <h:form> and thus you're effectively nesting forms which is illegal in HTML! Put that entire <p:dialog> outside the form like so:

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

Answer 2

try changing

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

into

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

EDIT

you can improve the selector by changing

name$='someSelect_input'

into

name='yourFormName\\:someSelect_input'

Answer 3

I my friends. i found the following solution.

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