Hi am trying to get the value of p:selectOneMenu from jquery , but i dint got as yet. am using JSF and primefaces as my UI ponent.

    <p:selectOneMenu style="width:150px" id="skill"
                value="#{loginBean.skill}" required="true" immediate="true"
                requiredMessage="Select your skill" label="skill" styleClass="someClassName">
                <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
                <f:selectItem itemLabel="Other" itemValue="Other"></f:selectItem>
                <f:selectItems value="#{loginBean.skillList}" var="item"
                    itemLabel="#{item}" itemValue="#{item}"></f:selectItems>
            </p:selectOneMenu>

In Html

<select id="skill_input" name="skill_input">
<option value="">Select</option>
<option value="Other">Other</option>
<option value="Tailoring">Tailoring</option>
<option value="Swimming">Swimming</option>
<option value="Roaming">Roaming</option>
</select>

thats my select one menu, my js is..

  var $element = $('.someClassName');

alert($element);

in the alert box i got as, [object Object], but not the selected value.

then i tried this,

   var $element = $('.someClassName').val();

alert($element);

but now i got an empty alert box.

then i tried this

 var $element = $("select[name='skill_input']:selected").val();

alert($element);

my alert box says undefined

What else i should do to get the selected value in that alert box..??

Hi am trying to get the value of p:selectOneMenu from jquery , but i dint got as yet. am using JSF and primefaces as my UI ponent.

    <p:selectOneMenu style="width:150px" id="skill"
                value="#{loginBean.skill}" required="true" immediate="true"
                requiredMessage="Select your skill" label="skill" styleClass="someClassName">
                <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
                <f:selectItem itemLabel="Other" itemValue="Other"></f:selectItem>
                <f:selectItems value="#{loginBean.skillList}" var="item"
                    itemLabel="#{item}" itemValue="#{item}"></f:selectItems>
            </p:selectOneMenu>

In Html

<select id="skill_input" name="skill_input">
<option value="">Select</option>
<option value="Other">Other</option>
<option value="Tailoring">Tailoring</option>
<option value="Swimming">Swimming</option>
<option value="Roaming">Roaming</option>
</select>

thats my select one menu, my js is..

  var $element = $('.someClassName');

alert($element);

in the alert box i got as, [object Object], but not the selected value.

then i tried this,

   var $element = $('.someClassName').val();

alert($element);

but now i got an empty alert box.

then i tried this

 var $element = $("select[name='skill_input']:selected").val();

alert($element);

my alert box says undefined

What else i should do to get the selected value in that alert box..??

• javascript
• jquery
• jsf
• jsf-2
• primefaces

Share Improve this question Follow asked Nov 11, 2011 at 11:37 KarthikeyanKarthikeyan 76733 gold badges1111 silver badges2525 bronze badges 2

• Just to avoid confusion: "In Html" section in the question refers to the translated primefaces part. So, it is not part of the actual code but it helps to e up with an answer. Therefore, in the answer by @dereli, the following name='skill_input' is used to refer to <p:selectOneMenu id="skill">. If you have <p:selectOneMenu id="anylabel">, the solution will be: var $element = $("select[name='anylabel_input'] option:selected").val(); – soufanom Commented Aug 2, 2017 at 16:45
• Look at this: enter link description here – Naveen Kocherla Commented Sep 4, 2017 at 10:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Try this

var $element = $("select[name='skill_input'] option:selected").val();

alert($element);

I haven't really used Jquery but if you want to use a simple javascript solution, that works, you're wele to:

var selectedValue = document.getElementById("MyForm:skill").value

MyForm would be the form id where selectOneMenu ponent can be found. And skill, of course is you selectOneMenu id.

you need to select one option which value is not empty, or set first option value to something like 'empty'

• by default the first option is selected and in your code it has an empty value - so you get nothing displayed

Define widgetVar and get value with PrimeFace framework

<p:selectOneMenu widgetVar="foo" style="width:150px" id="skill"
    value="#{loginBean.skill}" required="true" immediate="true"
    requiredMessage="Select your skill" label="skill" styleClass="someClassName">
        <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
        <f:selectItem itemLabel="Other" itemValue="Other"></f:selectItem>
        <f:selectItems value="#{loginBean.skillList}" var="item"
                    itemLabel="#{item}" itemValue="#{item}">
        </f:selectItems>
</p:selectOneMenu>

// Call it in your JS
console.log(PF('foo').getSelectedValue());