How to get the value of a select through your class?

The problem does not have to do with how you select select , and it's more about what you're really selecting. As some mention the ID should be unique, and therefore it is the most appropriate to use them. But if the class you have assigned to your select is also unique, you have no problem selecting the element through it.

The problem comes when several elements have the same class (since these are as they say their name designate a class / type and it is correct to use them more than once in the same document), and when you select them with jQuery you will have so many Elements as elements are assigned the class you are selecting. And if you call the .val() method this will return the value of the first of the selected elements, which may not necessarily be the one you want.

As a solution I can think of two things:

• The most recommended is that you select it for your ID .
• If you need to do it for your class, and several select have that class, you can access a specific one by appending the : eq (index) selector, where index is the position of the element that interests you, and the first has the index 0 .

For example:

var $el = $('.i-am-select:eq(2)');
alert($el.val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select class="i-am-select">
    <option>one</option>
</select>

<select class="i-am-select">
    <option>two</option>
</select>

<select class="i-am-select">
    <option>three</option>
</select>

Changing the index in the : eq () selector will see how the selected select changes.

Good luck and greetings!

In jQuery there should not be any problem when reading the value using the class or ID as a selector. The problem can be found if you have several select with the same class.

• When you select by ID, that ID is unique (or should be) and will return the value of that select in particular.
• When you select by class, that class may not be unique, in which case a list with all the elements that have that class will be returned; Then when doing the val() it only returns the value of the first (which is probably not selected and that's why you only see an empty string in alert ) which can lead to confusion if what you wanted to read is the value of the second / third / etc.

I want to give you an example how you can be useful using the $(this) 1 selector, when you have several select with the same class ( although it is not necessary to have an assigned class either ) and want to get the value ( value ) of each:

$(function(){
  
  $('.select').on('change', function() {
    
    console.log( $(this).prop('value') );
  });
});

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>  
<select class="select">
  <option value="01">Selecciona</option>
  <option value="01_valor">select 1</option>
</select>  
<select class="select">
  <option value="02">Selecciona</option>
  <option value="02_valor">select 2</option>
</select>  
<select class="select">
  <option value="03">Selecciona</option>
  <option value="03_valor">select 3</option>
</select>
  

1 $(this) - Refers or represents the object currently selected in a loop or event.