3

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

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

Karthikeyan
  • 757
  • 3
  • 11
  • 25
  • 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 come up with an answer. Therefore, in the answer by @dereli, the following name='skill_input' is used to refer to . If you have , the solution will be: var $element = $("select[name='anylabel_input'] option:selected").val(); – soufanom Aug 02 '17 at 16:45
  • Look at this: [enter link description here](https://stackoverflow.com/a/21310608/1189152) – Naveen Kocherla Sep 04 '17 at 10:26

4 Answers4

6

Try this

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

alert($element);
dereli
  • 1,814
  • 15
  • 23
1

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

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

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

spauny
  • 4,976
  • 9
  • 44
  • 61
  • I have tried it but dint get the solution, now i got it through the solution given by dereli, anyway thank you very much.. – Karthikeyan Nov 11 '11 at 12:03
0

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());
Valijon
  • 12,667
  • 4
  • 34
  • 67
0

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
Irishka
  • 1,136
  • 6
  • 12
  • No, i have selected the option which contains value. But dint got it.. now i got it with the above solution given by dereli.. anyway thanks for ur response too. – Karthikeyan Nov 11 '11 at 12:02
  • ok sorry, I didn't see that you don't have a space after parent element, but this $('#skill_input').val() should work; you never defined a class for your select, maybe that was a problem? [$('.someClassName').val();] – Irishka Nov 11 '11 at 12:39