val() returning html() instead of undefined for <option> tag when no value attribute is set
<p>Consider the following HTML:</p>

<pre><code>&lt;select&gt;
    &lt;option value="hasAttr"&gt;Has a value attr&lt;/option&gt;
    &lt;option&gt;Does not have a value attr&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>As you can see, one of the options has a value attribute set and the other does not. However, when I go to check the <code>val()</code> for each of the options via jQuery, the option that does not have a value attribute set is returning the text inside of the  tag (<code>html()</code>) instead of <code>undefined</code> as I would normally expect. </p>

<pre><code>var $select = $('select');

$select.each(function() {
    var $this = $(this),
        $options = $this.children('option');

    $options.each(function(){
        var $option = $(this),
            $value  = $option.val(),
            $html   = $option.html();

        console.log('Option Value: '+ $value +'\nOption HTML: '+ $html);

    });

});
</code></pre>

<p>Even if I change the code to look for <code>$option.attr('value')</code>, I still get the same results. Is there a way that I can check to see if an <code>&lt;option&gt;</code> has a <code>value</code> attribute present that will return boolean?</p>

<p>Here is a <a href="http://jsfiddle.net/cVJux/" rel="nofollow">jsFiddle</a>.</p>

<hr>

<p>Updated <a href="http://jsfiddle.net/cVJux/2/" rel="nofollow">jsFiddle</a> with solution.</p>
