Question

I have the following code that runs on change for a select box:

 $('#reg-phone-type').change( function() {
      console.dir($(this));
      console.log("$(this).val():" + $(this).val());
    if( $(this).val == 'work' ) {
      // do one thing
    } else {
      // do something else
    }
  });

When I print out console.dir($(this)); I can see that the selected option is set (in my screenshot example) to “work” (the label is proper case, but the actual option value is lower, so I know I’m not dealing with a case issue).

Here’s the HTML from Firebug after the select box was changed (default is “home”):

<select name="regPhoneType" id="reg-phone-type" style="display: none;" value="work">
    <option value="home">Home</option>
    <option value="work" selected="selected">Work</option>
    <option value="cell">Cell</option>
</select>

So you can see that the option is correctly selected. Why, then, when in my jquery, just one line later, I call console.log("$(this).val():" + $(this).val());, do I get “home” instead of “work”? My understanding was that .val() returns the value of the selected option of a select box, so I should be getting “work”.

Answer 1

Try:

$('#reg-phone-type option:selected').val(); 

or

$('option:selected',this).val();