In Javascript how do I add a new option into Html Select so inserted based on alphabetical value of text

Question

In Javascript how do I add a new option into Html Select so inserted based on alphabetical value of text ?

So I have this

var selectMask = document.getElementById("filenamemasks");
var newmask = document.createElement("option");
newmask.text  = maskName;
newmask.value = maskMask;
selectMask.add(newmask);

but I want it to add newmask so it comes just after the the option that has value of text just alphabetically before.

Possible duplicate of [append option to select menu?](https://stackoverflow.com/questions/5182772/append-option-to-select-menu) — Budyn, Aug 03 '18 at 10:23
[`.prepend()`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/prepend) @PaulTaylor ? — Sølve T., Aug 03 '18 at 10:28

score 2 · Answer 1 · answered Aug 03 '18 at 11:28

You have to get all options and add theme to and array variable called options. Second add new item to options array and the sort that array and clear select tag and at the end add sorted options to select tag like this.

      
document.getElementById('button').addEventListener('click',function(event){
        var options = [];
        var selectMask = document.getElementById("filenamemasks");
        var newmask = document.createElement("option");
        newmask.text  = document.getElementById('option_title').value;
        newmask.value = document.getElementById('option_value').value;
        options.push(newmask)
        var i;
        var txt;
        for (i = 0; i < selectMask.length; i++) {
         options.push(selectMask.options[i]);
            txt = txt + "\n" + selectMask.options[i].text;
        }
        options.sort(function(a, b) {
            var textA = a.text.toUpperCase();
            var textB = b.text.toUpperCase();
            return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
        });
        
        selectMask.innerHtml="";
        for (i = 0; i < options.length; i++) {
            selectMask.add(options[i]);
        }
      });

        <select id="filenamemasks">
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Mango</option>
        <option value="4">Orange</option>
    </select>
    <input id="option_title" placeholder="title">
    <input id="option_value" placeholder="value">
    <button id="button">add item</button>

Okay thanks, shame there is not a way to just insert in place instead though. SO I couldnt apply a sort() function directly to the select then ? — Paul Taylor, Aug 04 '18 at 08:41
@PaulTaylor, I think there is no easier way in javascript. maybe using a third-party library. — Mohammad Rajabloo, Aug 04 '18 at 09:12
Actually likes yo can sort a select, https://stackoverflow.com/questions/51670552/in-javascript-how-do-i-add-a-new-option-into-html-select-so-inserted-based-on-al/51671626?noredirect=1#comment90330600_51671626 — Paul Taylor, Aug 04 '18 at 09:16
Sorry I meant - https://stackoverflow.com/questions/20693593/sort-select-options-by-value-attribute-using-jquery — Paul Taylor, Aug 05 '18 at 07:28

Paul Taylor · Accepted Answer · 2018-08-05T11:39:57.530

0

So building on Mohammads answer and the answer I linked to the solution I found that worked was just to

Add the new element to the end of the list ,then sort list as follows:

sortAlphabetically("#filenamemasks");

function sortAlphabetically(selectName) {
     var functionsToSort = $(selectName + ' ' + 'option');
     functionsToSort.sort(function(a,b){
        var textA = a.text.toUpperCase();
        var textB = b.text.toUpperCase();
        return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
     });
     $(selectName).html(functionsToSort); 
}

edited Aug 05 '18 at 11:39

answered Aug 05 '18 at 07:35

Paul Taylor

13,411
42
184
351

your answer is shorter but you said in Javascript . and I thought you don't want to use any third-party library. but it's great. – Mohammad Rajabloo Aug 05 '18 at 19:08

In Javascript how do I add a new option into Html Select so inserted based on alphabetical value of text

2 Answers2