javascript - HTML - 用十进制值排序选择

Question

我遇到麻烦了... 我正在构建的动态表单中出现了这种奇怪的输出。

基本上，当用户选择一个选项时，我有一个 JavaScript 来完成表单，从“土壤类型”»“倾斜 Angular ”»“水速”开始。现在，'Water Speed' 有十进制值，它们都加起来可以很好地添加到下拉选择中，但完全乱序。

我的选择列表是这样的:

1, 2、 3、 1.5, 2.5

代替:

1, 1.5, 2、 2.5, 3

我尝试将它们全部转换为浮点值，但没有成功……让我烦恼的是，对象及其属性以正确的顺序声明，并且 console.log() 输出它们也很好，所以我很想知道这是否只是 HTML 错误以及是否有任何解决方法。

顺便说一句，我将它们添加到选择标签的方式是:

for(speed in obj[speeds]){
$('<option value=\"'+speed+'\">'+speed+'</option>').appendTo('select[name=waterspeed]');
        }

提前致谢!

Answer 1

首先尝试对速度数组进行排序:

obj[speeds].sort(function(a, b) {
    return a - b
});

此外，通常不建议将 for in 循环用于数组。考虑使用“常规”for 循环:

for(var i = 0, max = obj[speeds].length; i < max; i++) {
   var speed = obj[speeds][i];
}