Question

This is really odd, but I am probably missing something simple. I have a simple select statement where a user can choose a value.

onChange calls a function getDrop2() which currently I am trying to get it to alert me which option is chosen.

my html is:

<select  onChange= "getDrop2()" id = "drop1" >
     <option value="0">All</option>
     <option value="1">Alphabetical</option>
     <option value="2">Brewery</option>
     <option value="3">Style</option>
</select>

My Javascript is:

function getDrop2(){
    var choice = $("#drop1").val()
    alert(choice);

}

The output of the alert statement is just blank.

Answer 1

In jQuery, you’re better off doing something like:

<select id = "drop1" >
     <option value="0">All</option>
     <option value="1">Alphabetical</option>
     <option value="2">Brewery</option>
     <option value="3">Style</option>
</select>

With the following JavaScript:

 $(function(){
    $('#drop1').change(function() {
        var choice = $(this).val();
        alert(choice);
    }
  });

The idea is that jQuery is now attaching the change function automatically to the select with the id of “drop1” By using this pattern, you’ve decoupled the HTML from the JavaScript that’s doing the business logic.