Question

I’m trying to set a variable to the value of the selected item in a dropdown but can’t get it to work properly. Here is the html:

<select id="locationChoice" name="WorkflowList">
<option value=" ">-- Please Select --</option>
<option value="14643">Item A</option>
<option value="14644">Item B</option>
<option value="14645">Item C</option>
</select>

Here’s the jquery:

    var rfiSchooldropdown = $('#locationChoice:selected').val(); 
$("#locationChoice").change(function() {
alert(rfiSchooldropdown);
});

I know I’m close but it’s not grabbing the value properly. I’m using “alert” to test, FYI.

Any help is appreciated!

Answer 1

Just set it again on the change event, like this:

var rfiSchooldropdown = $('#locationChoice').val(); //no :selected here
$("#locationChoice").change(function() {
  rfiSchooldropdown = $(this).val();     
  alert(rfiSchooldropdown);
});

Or, a bit simpler overall:

var rfiSchooldropdown;
$("#locationChoice").change(function() {
  rfiSchooldropdown = $(this).val();
  //use rfiSchooldropdown
}).change();

Note in the first example I removed :selected, .val() can be called directly on the <select> element itself.