当没有设置value属性时,val()返回html()而不是<option>标记的undefined

Question

请考虑以下HTML:

<select>
    <option value="hasAttr">Has a value attr</option>
    <option>Does not have a value attr</option>
</select>

如您所见,其中一个选项具有值属性集,而另一个选项没有.但是,当我val()通过jQuery 检查每个选项时,没有设置value属性的选项会返回tag(html())内部的文本,而不是undefined我通常所期望的那样.

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);

    });

});

即使我改变代码来寻找$option.attr('value'),我仍然会得到相同的结果.有没有办法可以检查是否<option>有一个value属性存在将返回布尔值？

这是一个jsFiddle.

---

用解决方案更新了jsFiddle.

Answer 1

这是正确的标准行为.在没有value属性的情况下,元素的文本内容将用作元素的值.

来自W3C网站:

如果没有[value属性],则option元素的值是元素的textContent.

您可以getAttribute在DOM节点上测试是否存在content属性:

$option[0].getAtribute('value') // returns null

或者,您可以将jQuery is方法与"has-attribute"选择器一起使用:

$option.is('[value]') // returns false