Question

我使用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属性时：在将其附加到正文之前或之后。你能解释一下这个原因吗？

Answer 1

它只是看起来像$ .prop（）函数必须在项目附加到正文后运行。以下是使用您的第一个代码的示例：http://jsfiddle.net/jakelauer/R9auG/311/

代码本身：

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

PS - 你没有关闭jQuery中的<option>标签。浏览器非常智能并且正在为您修复此问题，但如果您不像我在示例中那样关闭它们，则可能会导致严重问题。

Answer 2

如果浏览器首次呈现元素时没有option属性selected，则会选择第一个。

我认为这是规范所要求的，但事实证明this was undefined in HTML 4.01并且我在the current spec中找不到任何关于它的内容。

有这个，来自HTML 4.01规范：

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

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

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

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

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

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

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

如果您在the select element specification的详细信息中了解“占位符标签选项”，则可能会发现它很有用。