Why I can't obtain the value of the value attribute of the option defined into a select?

Question

I am pretty new in JavaScript and jQuery and I have the following problem trying to retrieve the value related to the selected option of a select.

So, into my page I have:

<select id="selAttivitaSelezionata" class="form-control valid" name="selAttivita" aria-invalid="false">
    <option value="valida">Valida Progetto</option>
    <option value="invalida">Rimuovi Validazione</option>
</select>

then I have the following jQuery code that is performed every time that the user select an option inside the previous select:

$("#selAttivitaSelezionata").change(function() {
    //alert("TIPOLOGIA PROGETTO CAMBIATA");
                    
    var sel = $("#selAttivitaSelezionata");
    var val = sel.value;
    alert(val);
                    
    $("#statoProgettoLabel").hide();
    $("#selStatoProgetto").hide();
});

So, as you can see first I select the select object in the DOM having id="selAttivitaSelezionata" and then I try to obtain the selected value by sel.value, then I print it into an alert popup

The problem is that the alert is empty. Using the FireBug debugger I see that the sel variable is correctly initialized but the val variable is undefined as value obtained by sel.value.

Why? What am I missing? How can I obtain the value of the value attribute (valida or invalida)?

Answer 1

Because you have this:

var sel = $('#selAttivitaSelezionata');

Which makes sel a jQuery object.

This:

var val = sel.value;

Should be this:

var val = sel.val();

As .val() is the jQuery method for retrieving the value.

You could make this much better by using $(this):

$("#selAttivitaSelezionata").change(function() {
    var val = $(this).val();
    $("#statoProgettoLabel, #selStatoProgetto").hide();
});

Answer 2

Here is what you're looking for:

var val = sel.val();

Here is a reference to jQuery documentation http://api.jquery.com/val/

Answer 3

sel is jQuery object, you cannot use Javascript methods on it.

Use val() on it to get the value.

sel.val();

---

If you want to use Javascript methods,

var sel = $("#selAttivitaSelezionata")[0];
var val = sel.value;

Answer 4

You don't need two elements, instead just use the one along with the .val() jQuery function.

Working example

$("#selAttivitaSelezionata").change(function() {
  var val = $(this).val();
  console.log(val);

  $("#statoProgettoLabel").hide();
  $("#selStatoProgetto").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selAttivitaSelezionata" class="form-control valid" name="selAttivita" aria-invalid="false">
  <option value="valida">Valida Progetto</option>
  <option value="invalida">Rimuovi Validazione</option>
</select>

• .val() - jQuery API Documentation

Answer 5

Don't query the DOM again inside your "change" handler; jQuery gives you a reference to the element (the value of this):

$("#selAttivitaSelezionata").change(function() {
  var sel = $(this);
  var val = sel.val();

  // ...
});