Javascript 为什么在排序时选定的属性会移动到其他选项

我这里有一个脚本，它将选择下拉列表中的选项按字母顺序排列。但是，当我运行脚本并在Firebug中查看它时，我可以看到所选属性移动到另一个选项。 这是我做的一个垃圾桶

墨菲滴管
交直流
金属
布鲁斯·迪金森
添加新项目。。。


改变

$（“#更改”）。单击（函数（）{
var选项=$（“#测试选项”）；
var arr=options.map（函数（u，o）{
返回{
t:$（o）.text（），
v:o值
}; 
}).get（）；
arr.sort（函数（o1，o2）{
返回o1.t>o2.t-1:o1.t

您应该对

选项

元素进行排序，并将它们附加到select以重新排序。它将保留选定的

属性：

$('#change').click(function(){
    $('#test option').sort(function(o1, o2) { 
        return o1.text.localeCompare(o2.text); 
    }).appendTo('#test');
});

演示：
Firefox的UPD：

$('#change').click(function() {

    var $select = $('#test'),
        $options = $select.find('option').sort(function(o1, o2) { 
            return o1.label.localeCompare(o2.label); 
        });

    $options.each(function() {
        $select.append(this);
    });
});

演示：我认为这是因为您没有对实际选项进行排序，而是检索键/值组合，对其进行排序，然后将其应用于现有选项，从而丢失“选定的”属性。它似乎按字母顺序对选项进行排序，但每次我单击按钮时，选中的选项就会在列表中上移。它在chrome中工作，但出于某种原因，firefox会将选中选项切换到最后一个选项。你知道为什么吗？在这篇文章中可以找到。FF说它在Chrome和IE中工作的原因是因为它是那些浏览器中的一个bug。是的，这就是为什么使用
$选项。每个（…）
附加项都可以正常工作。
$('#change').click(function(){
    $('#test option').sort(function(o1, o2) { 
        return o1.text.localeCompare(o2.text); 
    }).appendTo('#test');
});

$('#change').click(function() {

    var $select = $('#test'),
        $options = $select.find('option').sort(function(o1, o2) { 
            return o1.label.localeCompare(o2.label); 
        });

    $options.each(function() {
        $select.append(this);
    });
});