当未设置<option>标签的value属性时，val()方法返回html()方法而不是undefined。

Question

考虑以下HTML：

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

如您所见，其中一个选项设置了value属性，而另一个则没有。但是，当我通过jQuery检查每个选项的val()时，没有设置value属性的选项返回的是标签内的文本（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。

- sbeliv01

---

如果您不想使用选项值，您需要使用<option value="">无值</option>，即使如此，它实际上仍然具有空字符串（""）的值，这在概念上与没有值（null）是不同的。 - zzzzBov

Answer 1

这是正确的，标准的行为。在缺少 value 属性时，元素的文本内容将被用作该元素的值。

从 W3C 网站 上可以得知：

如果没有 [value 属性]，那么选项元素的值就是该元素的 textContent。

---

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

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

或者，你可以使用jQuery的is方法和"has-attribute"选择器：

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

- lonesomeday

---

明白了，但那并没有真正回答问题。有没有一种方法可以检查值属性，根据属性是否实际设置返回true或false的选项？ - sbeliv01

如果你只需要一个布尔值，你也可以使用hasAttribute。 - James Montagne

谢谢，使用.is('[value]')可以按预期工作。只是需要注意的是，在这个例子中，.is('[val]')会返回false，但是'[value]'可以正常工作。 - sbeliv01

实际上，这是我的笔误 - 对不起！但需要注意的是：你应该遵循标准行为，而不是使用技巧来避免它。 - lonesomeday