2014-06-20 107 views
3

我從一些JSON填充幾個下拉列表,它現在按預期工作,但我試圖在下拉列表中排序值。對於我所有的下拉菜單,它工作正常,除了其中一個有數字,在這種情況下,它列出它的1,10,12,2。排序在一個下拉列表

任何想法如何我可以保持它按字母順序排序的一切,但獲得排序以處理數字值呢?

這裏是我的JS(這個複製的每個字段 - 也許應該嘗試找到一種方法,使這種可重複使用):

var populateGenres = _.map(data.genres, function (val) { 
    return '<option>' + val + '</option>'; 
}).join(); 
var target = '#genreField'; 
$('#genreField').html(populateGenres); 
reArrangeSelect(target); 

這裏的排序JS:

function reArrangeSelect(target) { 
    $(target).html($(target + " option").sort(function(a, b) { 
     return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 
    })) 
} 

我的HTML是此格式:

<td> 
    <select id="genreField" class="form-control"></select> 
</td> 
<td> 
    <select id="authorField" class="form-control"></select> 
</td> 
+0

這是否幫助? 「用數字和字母的字母排序數字」http://stackoverflow.com/questions/17996193/sort-numbers-with-letters-numerically-and-alphabetically – bloodyKnuckles

+0

這裏爲您的下拉列表中的數字1,10,12,2聽起來像字符串不是整數。檢查所有數字是整數? – Shail

+0

如果JSON是在服務器端生成的,我寧願花時間在服務器端排序,無論是在數據檢索本身還是在序列化JSON之前。客戶端方法不是很可靠,沒有提到它會導致頁面在速度較慢的計算機上凍結或使用較大的集合時凍結。 – JKurcik

回答

1
function reArrangeSelect(target) { 
    $(target).html($(target + " option").sort(function(a, b) { 
    // u can use that 'getValue' function 
    // for "a.text == 'some string'" it will return 'some string' (string type), 
    // for "a.text == '10'" it will return 10 (number type) 
    var aVal = getValue(a.text); 
    var bVal = getValue(b.text); 
    return aVal == bVal ? 0 : aVal < bVal ? -1 : 1; 
    })); 
} 

function getValue(val) { 
var asNumber = parseFloat(val); 
return isNaN(asNumber) ? val : asNumber; 
} 
1

您可以在通過運行之前對data.genres進行排序個功能:

data.genres.sort(function (a, b) { 
    a = parseInt(a, 10); 
    b = parseInt(b, 10); 
    if(a > b) { 
     return 1; 
    } else if(a < b) { 
     return -1; 
    } else { 
     return 0; 
    } 
}); 

一旦你對數據進行排序,然後運行_.map片段:你追加他們的<select>

var populateGenres = _.map(data.genres, function (val) { 
    return '<option>' + val + '</option>'; 
}).join(); 

所有選項現在應該進行排序。

DEMO

+0

多數民衆贊成在這方面,有沒有辦法讓它更可重用,但我有10個下拉我試圖排序所以寧願不復制每個data.genre,data.author等排序? – Hagbard

+0

所有十個​​下拉列表中是否包含整數? – War10ck

+0

不,所有數據從服務器返回時都是字符串格式。一些下拉菜單是字母(比如Author),有些是完全數字的。 – Hagbard