javascript - 选择标签中最后附加的选项总是成为它的值

Question

我在 jquery 的帮助下在 js 中构建一个选择元素。我首先构建选择标记，然后将选项标记附加到它。这样做时，我在构建时将 selected 属性设置为选项标签之一。即使那样，无论哪个选项标签具有 selected 属性，最后附加的选项似乎都被视为选择字段的值。仅在 Firefox 中是这种情况，chrome 和 IE 可以正常工作。这是我想了解的东西还是已知问题？

html

<select id="test">
</select>

JS

var $ =jQuery.noConflict();
$("#test").append("<option value='one' selected='selected'>one</option>");
$("#test").append("<option value='two' >two</option>");
$("#test").prepend("<option value='zero' >zero</option>");
var a = $("#test").children().get();
$("#test").children().remove();
$("#test").append(a);

小提琴链接http://jsfiddle.net/AfT3Z/

Answer 1

这段代码应该做什么？

var a = $("#test").children().get();
$("#test").children().remove();
$("#test").append(a);

删除它按预期工作http://jsfiddle.net/AfT3Z/1/

编辑：

如果您需要我删除的代码，您可以这样修改：

var a = $("#test").html();
$("#test").children().remove();
$("#test").html(a);

在这里小提琴：http: //jsfiddle.net/AfT3Z/2/

这样你就不会在selected属性上松散了。

编辑＃2：

您甚至可以克隆孩子以获得它们的精确副本：

var $ =jQuery.noConflict();
$("#test").append("<option value='one' selected='selected'>one</option>");
$("#test").append("<option value='two' >two</option>");
$("#test").prepend("<option value='zero' >zero</option>");

var a = $("#test").children().clone();
$("#test").children().remove();
$("#test").append(a);