select标记中的最后一个附加选项始终成为它的值

Question

我在jquery的帮助下在js中构建一个select元素。我首先构建select标签，然后将options标签附加到它。在这样做的同时，我将选中的属性设置为其中一个选项标记。即使这样，无论哪个选项标签具有所选属性，最后添加的选项似乎都被视为选择字段的值。只有在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);