Get Selected Value From SelectOnemenu Using Javascript In Primefaces And Open A Dialog Box

How can we get the selected value of PrimeFaces using JavaScript/jQuery? I am trying to get it this way, but it does not go inside if condition, which means

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

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

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