How to add a parameter to the selection box in the correct position dynamically?

Question

Given the selection box below. I want to be able to dynamically add a new option.

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

I added the following:

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

The problem here is that this position is unnatural, it is higher than an empty placeholder parameter and is not sorted alphabetically. Is there a magical way to add a new selection to the right place?

thanks

Answer 1

I think you can use .after ('blah') with the selector you described.

eg:

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

Is this any use?

Answer 2

As mentioned in my comment, you can remove a parameter that you don’t want to sort, and then add it back.

Note. . Below you will work in your case, because you need to -- and Add New at the end.

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

Answer 3

Inserts a new parameter value (if it is already sorted)

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

Answer 4

Not very elegant, but this should do:

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

Answer 5

Save your parameters in an array of objects and generate your choice from this object. Then add new elements to this array and restore your selection.

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

Demo: http://jsfiddle.net/kfC3S/

Answer 6

You can use underscore sortedIndex to figure out where to insert the element, and then jquery after to insert it at this position. It is assumed that you want to sort by option in alphabetical order:

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