Inserting an input into a select by order

Question

HTML:
<select id="list">
    <option value="A">Alpha</option>
    <option value="B">Bravo</option>
    <option value="D">Delta</option>
</select>

jQuery:
$("#list").append("<option value=\"C\">Charlie</option>");

Is there any easy way to get option C between B and D?

See there to sort options alphabetically: http://stackoverflow.com/a/12073377/1414562 — A. Wolff, May 29 '13 at 10:41

billyonecan · Answer 1 · 2013-05-29T10:52:32.390

0

You could use insertAfter():

$("<option value=\"C\">Charlie</option>").insertAfter('#list > option[value="B"]');

...or insertBefore():

$("<option value=\"C\">Charlie</option>").insertBefore('#list > option[value="D"]');

Here's a fiddle

edited May 29 '13 at 10:52

answered May 29 '13 at 10:39

billyonecan

19,687
8
41
62

This will require him to always count the elements to know the value inside eq(). – Zsolt Szilagyi May 29 '13 at 10:43

score 0 · Answer 2 · answered May 29 '13 at 10:39

0

$("option[value='B']").after("<option value=\"C\">Charlie</option>");

More information in after() and insertAfter() (both doing the same bt taking different ways) in the official docu.

answered May 29 '13 at 10:39

Zsolt Szilagyi

4,274
4
25
43

palaѕн · Answer 3 · 2013-05-30T05:45:33.190

0

Try this using before():

$("#list option[value=D]").before("<option value='C'>Charlie</option>");

This will insert the new option Charlie, specified by the parameter, before the option Delta.

edited May 30 '13 at 05:45

answered May 29 '13 at 10:40

palaѕн

68,816
17
108
129

2

This will fail as soon as an Option E exists. – Zsolt Szilagyi May 29 '13 at 10:42

score 0 · Answer 4 · answered May 29 '13 at 10:46

0

You can try with attribute selectors:

$("<option value=\"C\">Charlie</option>").insertAfter($('#list option[value*="B"]'));

Fiddle

answered May 29 '13 at 10:46

Jai

72,925
12
73
99

Inserting an input into a select by order

4 Answers4

Here's a fiddle