2

我使用 jquery 创建了一个最初的空白select元素。我试过这个：

$('<select><option>1<option>2</select>').prop('selectedIndex', -1).appendTo(document.body);

这成功创建了一个选择框，但它不是空白的。通过实验，我发现这是可行的：

var $new = $('<select><option>1<option>2</select>').appendTo(document.body);
$new.prop('selectedIndex', -1);

这两者之间的不同之处在于selectedIndex设置属性时：在它附加到主体之前或之后。你能解释一下这背后的原因吗？

这是一个 JSFiddle：http: //jsfiddle.net/R9auG/

4

2 回答 2

2

如果浏览器第一次渲染元素时没有option带有该selected属性的 s，它将选择第一个。

我认为这是规范所要求的，但事实证明这在 HTML 4.01 中是未定义的，我在当前规范中根本找不到任何关于它的信息。

有这个，来自 HTML 4.01 规范：

笔记。由于现有实现对这种情况的处理方式不同，因此当前规范与 RFC 1866（[RFC1866] 第 8.1.3 节）不同，后者指出：

初始状态选择了第一个选项，除非任何元素上都存在 SELECTED 属性。

由于用户代理行为不同，作者应确保每个菜单都包含一个默认的预选选项。

无论如何，这似乎仍然是它的处理方式。

在您的第一个示例中，浏览器尚不了解该selectedIndex属性，因为DOMselect对象在元素呈现之前不存在。该属性是在浏览器创建对象时创建的。您无法更改尚不存在的对象的属性。

这令人困惑……我们正在处理两种不同类型的对象：jQuery对象和DOM对象。

在您的第二个示例中，浏览器呈现select元素并创建一个具有selectedIndex属性的对象，您立即更改该属性以表示未选择任何内容 (-1)。

如果您在select元素规范的详细信息中阅读了“占位符标签选项”，您可能会发现它很有用。

于 2013-05-29T04:37:46.660 回答
2

在我看来，$.prop() 函数必须在项目附加到正文后运行。这是使用您的第一个代码的示例：http: //jsfiddle.net/jakelauer/R9auG/311/

和代码本身：

$('<select><option>1</option><option>2</option></select>')
    .appendTo(document.body)
    .prop('selectedIndex', -1);

PS - 你没有<option>在 jQuery 中关闭你的标签。浏览器很智能，正在为您解决这个问题，但如果您不像我在示例中所做的那样关闭它们，可能会导致大问题。

于 2013-05-29T02:44:52.163 回答