How can I get SelectOneMenu value in Bootsfaces with javascript or jquery?

Question

I am new to JSF and I want to get the SelectOneMenu value with javascript or jquery to do form validation.

I tried getting it the usual way like this:

function apasa() {
   var a = $("#j_idt68Inner").val();
   alert(a);
}

But it returns null. This is the JSF code:

<b:column medium-screen="6">
  <b:selectOneMenu  colMd="2" required="true"  labelColMd="2" style="width:200px;margin-top: 30px;" >
    <f:selectItem itemLabel="Selecteaza raport" itemValue="" />
    <f:selectItem itemLabel="1.Neconcordante D394" itemValue="1" />
    <f:selectItem itemLabel="2.Neconcordante D112 REVISAL" itemValue="2" />     
  </b:selectOneMenu>
</b:column>

This component is in a form. I would like to get the data from itemValue.

Answer 1

General advice: forget about ids when you're working with JSF. Rather use pseudo CSS classes.

Long answer: JSF uses fully-qualified ids. That's a great idea. It allows you to use the same id for every row in a table. Internally, JSF adds a prefix to these ids, but on the surface it hides this from you. Most of the time, this results in a nice and simple API for Java programmers.

Problems arise if you're using jQuery. Among other things, the fully qualified id contains at least one colon. You have to escape that in each jQuery selector. Plus, you need to know the fully qualified name.

So you either make yourself familiar with how the id is composed. While that's a fine approach - the JSF approach to ids is both simple and clever! - I don't recommend that. More often than not, it's easier to use a pseudo CSS class like so:

<b:selectOneMenu class="raport-selection" >
  <f:selectItem itemLabel="Selecteaza raport" itemValue="" />
  <f:selectItem itemLabel="1.Neconcordante D394" itemValue="1" />
  <f:selectItem itemLabel="2.Neconcordante D112 REVISAL" itemValue="2" />     
</b:selectOneMenu>

Now you can access the value with a simple jQuery selectors:

$(".raport-selection").val();

There are two "buts":

1. The pseudo-class approach fails if you're using the selection box multiple times in a table or in an <ui:repeat> look. In this case, you end up with multiple copies of the same input field, each of them bearing the same pseudo CSS class.

2. There are two flavors of <b:selectOneMenu>. If you activate the select2=true option, BootsFaces generates a completely different HTML code. Please have a look at https://select2.org/ to see how the select2 flavor is implemented.