选择，空选项选择，Chrome 与 Firefox 的区别答案

【问题标题】：Select, null option select, difference in Chrome vs Firefox选择，空选项选择，Chrome 与 Firefox 的区别
【发布时间】：2012-10-09 20:49:55
【问题描述】：

代码在下方http://jsfiddle.net/eCubeH/utBEs/1/

选择是必需的。因此，选择第一个空字符串值选项应该使其无效。

我使用 jquery 条件：($(myChangeSelector + ":invalid").length > 0) 来识别无效状态。 Firefox 15 正确返回值 1 以表明它是无效的。 Chrome 21 返回 0，然后继续表现不一致。

对此我很头疼，这是 Chrome 错误还是我遗漏了什么？

----- 代码-----

<select id="selDisbLocation" required="" tabindex="3">
    <option value="" >-</option>
    <option value="0" selected>Center</option>
    <option value="1" >Office</option>
</select>

$(function() {
    $("select").live(
    "change",
    function(event) {
       myChangeSelector = "#" + event.target.id;
       alert(myChangeSelector);
       alert($(myChangeSelector).val());
       alert("Invalid Length: " + $(myChangeSelector + ":invalid").length);
    });
});

【问题讨论】：

标签： google-chrome select null default

【解决方案1】：

根据https://developer.mozilla.org/en-US/docs/CSS/:invalid，CSS伪类:invalid只适用于<input>和<form>元素。这可能是导致您意外结果的原因。

我建议改为按值或索引使<select> 无效。

【讨论】：

感谢您的建议，这似乎是我必须采取的路线。我在stackoverflow.com/questions/7815951/… 看到了一个相关问题。我也尝试了 .is(':invalid') ，它在 Chrome 中给出了同样的错误，在 FF 中有效。
是的，这可能是由于不同的浏览器如何实现该功能。因为<select> 不受官方支持，所以有些浏览器甚至可能没有该元素的非官方实现。