如何使用jQuery對動態生成的SELECT元素中的數據進行排序？

我正在使用JQuery來填充SELECT元素，以減少輸出標記的大小。如何使用jQuery對動態生成的SELECT元素中的數據進行排序？

一切都在按照我想要的方式工作，除了一件事;分揀。

看起來像我在下面的代碼中得到.each時，JQuery按val值而不是text值進行排序。我希望列表按text的值排序，或者更理想，按照我在變量dyn_list_product中生成列表的順序。

我該如何做到這一點？

非常感謝。

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sample Code</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script type = "text/javascript" > 
     $(document).ready(function(){ 
     var dyn_list_product = { 10075:'abc', 10635:'def', 10246:'ghi', 10245:'jkl', 10076:'mno', 10642:'pqr', 10995:'stu', 10255:'vwx', 10230:'yz' }; 
     $('.jquery_list_product').append($('<option></option>').val('').html('----------')); 
     $.each(dyn_list_product , function(val, text) { $('.jquery_list_product').append($('<option></option>').val(val).html(text)); }); 
     }) 
    </script> 
    </head> 

    <body> 
    <select name="insert-1[]" class="jquery_list_product"></select> 
    <select name="insert-2[]" class="jquery_list_product"></select> 
    <select name="insert-3[]" class="jquery_list_product"></select> 
    </body> 
</html>

來源

2012-12-31 Ralph M. Rivera

jQuery代碼不排序任何東西。在JavaScript中未定義通過對象的鍵的迭代順序。也就是說，您以某種順序定義屬性的事實並不意味着.each()函數將它們傳遞給您的處理程序的順序。

使用數組來代替：

var dyn_list_product = [ { key: '10075', val: 'abc'}, { key: '10635', val: :'def'}, ... ];

你.each()循環便會像：

$.each(dyn_list_product , function(index, obj) { 
    $('.jquery_list_product').append($('<option></option>').val(obj.key).html(obj.val)); }); 
})

來源

2012-12-31 22:25:13 Pointy

@undefined感謝:-)這讓我發瘋的是'$。每（）'通首先像這樣的索引。 – Pointy

我不明白你的意思是「訂單未定義」。如果你看一下這個例子，那麼順序非常清楚，'val'部分與'html'部分相反。這是一致的，不管我生成列表的順序如何，順序將總是基於'val'。 –

@HumanBacon jQuery'.each（）'函數將使用'for ... in'循環或者'Object.keys（）'來驅動迭代。在任何情況下，都不能保證JavaScript運行時內部提供的鍵/值對的順序與定義它時對象的外觀有什麼關係，或者添加了屬性的順序之後。 – Pointy

如何使用jQuery對動態生成的SELECT元素中的數據進行排序？

回答

相關問題