Javascript 如何在选择框的正确位置动态添加选项？

给定下面的选择框。我希望能够动态添加一个新选项

<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)
);

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

---

谢谢

我想你可以用。在你描述的选择器“废话”之后

例如：

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

---

这有什么用吗？

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

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

---

不是很优雅，但这应该可以：

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

---

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

$(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);
        }
    });
});

演示：

您可以使用来确定在何处插入项目，然后使用函数将其插入该位置。这是假设您希望按选项文本字母顺序排序：

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);
}

---

这将在假定已排序的情况下向中插入一个新选项值

$('#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;
}
});

---

您提供的代码更改了选择，但没有添加选项。很抱歉，我使用添加选项的示例更新了代码。SKS，排序的问题是它无法保持底部的-和添加选项正确吗？@AnApprentice删除这两个选项，对其进行排序并重新添加。哦，阅读后我发现问题更多的是关于排序？请忽略。如果排序基于选项文本，只需将其视为插入排序，迭代选项并检查每个选项的文本；然后，使用。之后。。。正如Nick所提到的。谢谢，但是现在在这个片段的列表中添加了新的内容：如果插入到最后一个元素，这个选项就不会被插入。

$('#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;
}
});