如何动态地将选项添加到正确位置的选择框？答案

【问题标题】：How to add a option to a select box in the correct position dynamically?如何动态地将选项添加到正确位置的选择框？
【发布时间】：2012-03-28 22:29:41
【问题描述】：

鉴于下面的选择框。我希望能够动态添加新选项。

<select id="user_department_id" name="user[department_id]">

 <option value=""> </option>

 <option value="9">AAAAA</option>
 <option value="11">BBBBB</option>
 <option value="10">G</option>
 <option value="12">Z</option>

 <option value="">--</option>
 <option value="add">Add a New</option>
</select>

我一直在使用以下添加新选项：

$('#user_department_id')
    .prepend($("<option></option>")
    .attr("value",data.id)
    .text(data.title)
);

这里的问题是它的位置不自然，它在空占位符选项上方并且没有按字母顺序排序。有没有一种神奇的方法可以在正确的位置附加一个新的选择选项？

谢谢

【问题讨论】：

您提供的代码更改了选择，它没有添加选项。
stackoverflow.com/questions/278089/…的可能重复
抱歉，我用添加选项的示例更新了代码。
SKS，排序的问题是它不会维护--和底部的Add选项对吗？
@AnApprentice 删除这两个选项，对其进行排序并重新添加。

标签： javascript jquery html css

【解决方案1】：

这会插入一个新的选项值（假设它已经排序）

$('#yourselectID option').each(function()
{
  var option = $(this).text();
  option = option.toLowerCase(); 
  var test = option.toLowerCase();
  if ( option > test) 
{
    $(this).before('<option value="'+test+'">' + test+ '</option>');
    return false;
}
});

【讨论】：

当心这个sn-p：如果它应该作为最后一个元素插入，则不会插入该选项。

【解决方案2】：

我认为您可以将 .after('blah') 与您描述的选择器一起使用。

例如：

$('#user_department_id option[value="12"]').after('<option value="13">Q</option>')

这有什么用吗？

【讨论】：

哦，看完后我发现问题更多是关于排序的？请无视。
如果排序是基于选项文本的，只要把它当作插入排序，遍历选项，检查每个选项的文本；然后，使用 .after(...) 作为@Nick 提到的。

【解决方案3】：

正如我的评论中提到的，您可以删除您不想排序的选项，然后将它们添加回来。

注意：以下内容适用于您的情况，因为您希望在末尾添加 -- 和 Add New。

DEMO

    var selElem = document.getElementById('user_department_id')
    var tmpAry = [];
    var igOpt = [];
    for (var i = 0; i < selElem.options.length; i++) {

        if ($(selElem.options[i]).hasClass('ig')) {
            igOpt.push([selElem.options[i].text,
                        selElem.options[i].value]);
            continue;
        }
        tmpAry[i] = new Array();
        tmpAry[i][0] = selElem.options[i].text;
        tmpAry[i][1] = selElem.options[i].value;
    }
    tmpAry.sort();
    //merge with ignored options
    tmpAry = tmpAry.concat(igOpt);
    //remove options
    $(selElem).empty();

    for (var i = 0; i < tmpAry.length; i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }

【讨论】：

谢谢，但现在在列表中间添加了新的

【解决方案4】：

将您的选项保存在对象数组中并从该对象生成您的选择。然后将您的新项目添加到该数组并重新生成您的选择。

$(function() {
    // Any options always on the top
    var topOptions = '<option value=""> </option>';

    // Your middle, sorted options
    var options = [{val: 9, text: "AAAAA"}, {val: 11, text: "BBBBB"},{val: 10, text: "G"},{val: 12, text: "Z"}];

    // Any options always on the bottom
    var bottomOptions = '<option value="">--</option><option value="add">Add a New</option>';

    // Function to populate the select options from above data
    function populateOptions(element, options) {
        // Sort options
        options = options.sort(function(a, b) {
            return a.text.toLowerCase() > b.text.toLowerCase();
        });

        $(element).html('').append(topOptions);
        for (var i = 0; i < options.length; i++) {
            $('<option>').attr("value", options[i].val).text(options[i].text).appendTo($(element));
        }
        $(element).append(bottomOptions);
    }

    // Start by populating the select
    populateOptions('#user_department_id', options);

    // Add and repopulate when add requested
    $('#user_department_id').on('change', function() {
        if ($(this).val() == "add") {
            // Add option to list
            options.push({val: data.id, text: data.text});

            // Repopulate select
            populateOptions(this, options);

            // Select the new item
            $(this).val(data.id);
        }
    });
});

演示：http://jsfiddle.net/kfC3S/

【讨论】：

【解决方案5】：

不是很优雅，但应该这样做：

$('#user_department_id option').each(function() {
  if(this.text > data.title) {
    $(this).before('<option value="' + data.id + '">' + data.title + '</option>');
    return false;
  }
});

【讨论】：

【解决方案6】：

您可以使用underscore's sortedIndex 找出插入项目的位置，然后使用jquery's after 函数将其插入该位置。这是假设您要按选项文本按字母顺序排序：

var option = '<option value="' + data.id + '">' + data.title + '</option>';
var index = _.sortedIndex($('#user_department_id option'), option, function(item) {
  return $(item).text();
});
if(index === 0) {
  $('#user_department_id').prepend(option);
} else {
  $('#user_department_id option').eq(index - 1).after(option);
}

【讨论】：