張小呆的碎碎唸

在 jQuery - 使用 jQuery 簡單做資料左右增減 中，說到資料的左右增減，但有個問題，就是一進去是排序好的(遞增 或 遞減)，但是一做了左右增減後，增加資料的一方，最新的資料就會在最後一個，這這這...在某方面來說就不美觀啦，依照那篇的延續來加點工...

步驟五：在增減中，加入排序的 function
$('#btnRight').click(function() { $('#ProductList option:selected').each(function() { $("#ChooseProduct").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option"); $(this).remove(); }); SortOption("#ChooseProduct"); }); $('#btnLeft').click(function() { $('#ChooseProduct option:selected').each(function() { $("#ProductList").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option"); $(this).remove(); }); SortOption("#ProductList"); }); function SortOption(selectName) { //將所指定的 Select Collection 給 $dd var $dd = $(selectName); //將 Option 的 Text 與 Value 足筆塞到陣列中 if ($dd.length > 0) { var selectedVal = $dd.val(); var $options = $('option', $dd); var arrVals = []; $options.each(function() { arrVals.push({ text: $(this).text(), val: $(this).val() }); }); //使用 Javascript Array 提供的 Sort 功能，進行 Text 的排序 //此處排序方式是使用 ASC (遞增排序) arrVals.sort(function(a, b) { if (a.text > b.text) { return 1; } else if (a.text == b.text) { return 0; } else { return -1; } }); //將排序後的結果，再塞回 $options 中 for (var i = 0, l = arrVals.length; i < l; i++) { $($options[i]).val(arrVals[i].val).text(arrVals[i].text); } //指定被選取的選項 //$dd.val(selectedVal); } }

結果：






參考：
Sorting (dropdown) Select Options Using jQuery