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

给出下面的选择框。我希望能够动态添加一个新选项。如何动态地将选项添加到正确位置的选择框？

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

的问题，这里是它的位置不自然，它是空的占位符选项上面，而不是按字母顺序排序。是否有一种神奇的方式在正确的位置添加新的选择选项？

感谢

来源

2012-03-28 AnApprentice

您提供改变选择的代码，它不添加一个选项。 – 2012-03-28 22:32:30

可能的重复http://stackoverflow.com/questions/278089/javascript-to-sort-contents-of-select-element – 2012-03-28 22:35:21

对不起，我更新了代码，添加了一个选项的示例。 – AnApprentice 2012-03-28 22:36:10

我想你可以使用。经过（“嗒嗒”）跟你描述的选择。

例如：

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

是什么用途？

来源

2012-03-28 22:37:26 Nick

哦，阅读后我发现问题更多地是关于排序？请忽略。 – Nick 2012-03-28 22:41:10

如果排序基于选项文本，则将其视为插入排序，迭代选项并检查每个选项的文本;然后，使用.after（...）如@Nick所述。 – RMorrisey 2012-03-28 22:53:29

正如我的评论所述，您可以删除不想排序的选项，然后将其添加回去。

注：下面会在你的情况下工作，因为你想在年底--和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; 
    }

来源

2012-03-28 22:50:29

谢谢，但现在在列表中间添加新 – AnApprentice 2012-03-28 23:00:52

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

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

来源

2012-03-28 22:51:24

保持你的选择的对象的数组，并生成该对象的选择。然后将新项目添加到该阵列并重新生成您的选择。

$(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/

来源

2012-03-28 23:00:30

您可以使用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); 
}

来源

2014-12-17 03:56:04

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

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

来源

2015-09-02 17:15:47

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

回答

相关问题