Question

我有两个下拉列表，因为更改了第一个下拉菜单，它会触发一个jquery change（），它会在第一个下拉列表中显示带有公司ID的帖子。然后运行一个SQL查询以获取适用于该公司的人员列表，并使用选项填充选择框。这工作正常，我已将sql查询设置为ORDER BY admin_name。但是当jquery开始将选项插入下拉列表时，它似乎是按选项值排序（admin_id）。我该怎么做才能保持admin_name（选项的文本）排序的选项。下面是负责添加选项的jQuery代码：

$.post("listSignedBy.php", { company_id: company_id },
                function(data) {
                        alert(data); <-- this shows that the data is sorted correctly by the admin name.
                        var select = $('#signed_by');
                        if(select.prop) {
                                  var options = select.prop('options');
                        }
                        else {
                                  var options = select.attr('options');
                        }
                        $('option', select).remove();

                        var obj = jQuery.parseJSON(data);
                                    options[options.length] = new Option('-- Select Signed By --', '');
                        $.each(obj, function(val, text) {
                                    options[options.length] = new Option(text, val);
                        });
                        select.val(selectedOption);

                });

感谢您的帮助，如果您需要任何进一步的信息来帮助解决/修复，请与我们联系。

根据要求，示例JSON数据：

{"19082":"Aaron Smith","19081":"Becky Doe"}

所以在这种情况下我想要的是：

<option value='19082'>Aaron Smith</option>
<option value='19081'>Becky Doe</option>

但不是按文本排序，而是按值排序，所以我得到：

<option value='19081'>Becky Doe</option>
<option value='19082'>Aaron Smith</option>

Answer 1

对象没有排序..它实际上是按照迭代的顺序插入的。

但是，如果返回的响应顺序不是所需的顺序，那么最好的方法是首先插入选项并对选项进行排序。见下文，

DEMO： http://jsfiddle.net/gGd82/3/

// convert OPTIONs NodeList to an Array
// - keep in mind that we're using the original OPTION objects
var ary = (function(nl) {
    var a = [];
    for (var i = 0, len = nl.length; i < len; i++) {
      a.push(nl.item(i));
    }
    return a;
})(options);
// sort OPTIONs Array
ary.sort(function(a, b) {
    return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;    
});
// remove all OPTIONs from SELECT (don't worry, the original
// OPTION objects are still referenced in "ary") ;-)
options.length = 0;

// (re)add re-ordered OPTIONs to SELECT
select.html(ary);

select.prepend($('<option />').text('-- Select Signed By --').val(''));

参考文献： Sorting dropdown list using Javascript

Answer 2

我能够通过创建以下函数让它工作，然后在输入所有选项的.each（）之后引用该函数：

function Sort(a, b) {    
                return (a.innerHTML > b.innerHTML) ? 1 : -1;
};

$.post("listSignedBy.php", { company_id: company_id },
                function(data) {
                        var select = $('#signed_by');
                        if(select.prop) {
                                  var options = select.prop('options');
                        }
                        else {
                                  var options = select.attr('options');
                        }
                        $('option', select).remove();

                        var obj = jQuery.parseJSON(data);
                                    options[options.length] = new Option('-- Select Signed By --', '');
                        $.each(obj, function(val, text) {
                                    options[options.length] = new Option(text, val);
                        });
                        $('#signed_by option').sort(Sort).appendTo('#signed_by');
                        select.val(selectedOption);

                });

jQuery新选项需要排序

2 个答案: