Question

考虑以下HTML：

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

如您所见，其中一个选项设置了值属性，另一个选项没有。但是，当我通过jQuery检查每个选项的val()时，没有设置值属性的选项会返回标记内部的文本（html()）而不是{{ 1}}正如我通常所期望的那样。

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>属性会返回布尔值？

这是jsFiddle。

使用解决方案更新了jsFiddle。

Answer 1

这是正确的标准行为。如果没有value属性，则元素的文本内容将用作元素的值。

来自W3C website：

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

您可以使用DOM节点上的getAttribute来测试内容属性是否存在：

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

或者，您可以将jQuery is方法与“has-attribute”选择器一起使用：

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

当没有设置值属性时，val（）返回html（）而不是<option>标记的未定义</option>

1 个答案: