.val() not returning correct value
<p>I have the following code that runs on change for a select box:</p>

<pre><code> $('#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
    }
  });
</code></pre>

<p>When I print out <code>console.dir($(this));</code> 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).</p>

<p><img src="http://i.stack.imgur.com/qdiot.png" alt="enter image description here"></p>

<p>Here's the HTML from Firebug after the select box was changed (default is "home"):</p>

<p><img src="http://i.stack.imgur.com/7iwxA.png" alt="enter image description here"></p>

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

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

<p><img src="http://i.stack.imgur.com/WOJaA.png" alt="enter image description here"></p>
