How to create options of a select element dynamically using jquery?

Question

I need to create options of a select element dynamically via an ajax call. The number of options and their content will vary. This is how it looks prior to the ajax call:

 <select name="groupid" style="width:100%;">
<option value="0" selected>(Please select an option)</option>
</select>

Here is one of my attempts to create an option element with a dummy value:

$("<option></option>", {value: "999"}).appendTo('.select-group');

But it adds it outside of select. I also don't know how to set the text within .

Any ideas? I've seen some questions about populating existing select forms with a static number of existing options but not one like this.

Thanks.

If '.select-group' is your select element, then it will work, though you probably want to give it some text too: {value: "999", text: "999"}. — user1106925
– user1106925, Commented Mar 15, 2012 at 20:55

elclanrs · Accepted Answer · 2012-03-15 20:53:57Z

43

Where's .select-group? If you use id of #groupid then this should work just fine...

$('<option>').val('999').text('999').appendTo('#groupid');

answered Mar 15, 2012 at 20:53

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kleopatra · Accepted Answer · 2012-11-21 10:25:09Z

18

Here is the solution..

$('#yourSelectBoxId').append(new Option('optionName', 'optionValue'));

edited Nov 21, 2012 at 10:25

kleopatra

51.6k28 gold badges103 silver badges220 bronze badges

answered Nov 21, 2012 at 6:03

Vineet Kadkol

3313 silver badges5 bronze badges

Comments

Selvakumar Arumugam · Accepted Answer · 2012-03-15 20:54:05Z

11

If I understood correctly, below is what you need,

$("<option></option>", 
     {value: "999", text: "Nine Ninety Nine"})
    .appendTo('.select-group');

DEMO

Provided .select-group is the selector for the <select></select>

answered Mar 15, 2012 at 20:54

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Comments

Nadeemmnn Mohd · Accepted Answer · 2015-01-15 19:44:38Z

4

Here is alternative solution. this worked for me.

$('#yourSelectBoxId').append("<option value='Saab'>Saab</option>");

answered Jan 15, 2015 at 19:44

Nadeemmnn Mohd

7345 silver badges14 bronze badges

Comments

Titogelo · Accepted Answer · 2014-04-21 15:26:14Z

0

This worked for me:

$('#chat_list').append(new Option(this.subject, this.key_remote_jid));

answered Apr 21, 2014 at 15:26

Titogelo

731 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to create options of a select element dynamically using jquery?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related