Home/ Questions/Q 8976413
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T19:07:37+00:00

I have a select list that looks like this: <select id=testSelect> <option value=option1 label=1>Option

  • 0

I have a select list that looks like this:

<select id="testSelect">
    <option value="option1" label="1">Option 1</option>
    <option value="option3" label="3">Option 3</option>
    <option value="option5" label="5">Option 5</option>
</select>​

I’m using the label to control the order in which the options should be displayed. The initial select list is in the correct order (despite missing items).

I would like to programatically add a new option to this select list. I found this question which provided me with a link to an excellent jquery select cheat sheet.

This cheat sheet provides the following code to add options at a specific index, which is similar to what I want to do:

$("#elementid option:eq(0)").after("<option value='4'>Some pears</option>"

However, I don’t need to insert a new option after a specific index (because these items will be removed and re-added multiple times), I need to insert the option in the correct order based on the label value.

I tried two things:

$(function () {
   $("#testSelect option:eq(1)").after("<option value='option2' label='2'>Option 2</option>"); //Method A
    $("#testSelect option:label(1)").after("<option value='option2' label='2'>Option 2</option>"); //Method B
});​

Method A inserts the new item after the second item in the list, which makes my list look like: 1 3 2 5

Method B throws an exception: Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: label

However, even if Method B worked, I would still have an issue since the option with the label of 1 may not actually exist. What I’d really like to do is insert the new option in the correct place in the list (based on the label) regardless of whether or not specific option elements exist around it.

Any ideas how this could be done? jsfiddle

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How about this?

    jsFiddle example

    You can insert your new options anywhere and then just sort the options based on their label value.

    $("#testSelect").append("<option value='option2' label='2'>Option 2</option>");

$("#testSelect option").sort(function(a, b) {
    if ($(a).attr('label') < $(b).attr('label')) return -1;
    if ($(a).attr('label') > $(b).attr('label')) return 1;
    return 0;
}).appendTo('#testSelect');​
    • 0