How do I add an option to a dropdown list using jQuery?

Question

I'm trying to use the following code to add an option to a dropdown list in ASP.NET. Any ideas why this doesn't work? I tried Googling but can't figure out why this won't work.

What shoud the code do? I have an ASP.NET dropdown list. I want to access the dropdown list by name and add an item to the list. The item should have descriptive text of "Some Text" and a value of "123".

Thanks!

$("#ddlCategory").append($("<option>Some Text</option>").val(1).html("123"));

$("<option>Some Text</option>") is not a valid selector... Please read how to use selector in jquery... — Guillaume Cisco
– Guillaume Cisco, Commented Nov 3, 2011 at 15:10
try this one if you like to use javascript chiragrdarji.wordpress.com/2007/06/06/… — huMpty duMpty
– huMpty duMpty, Commented Nov 3, 2011 at 15:16
This will not make it get stored in viewstate. Be sure you are not relying on normal postback behavior /viewstate if you do this. If you are, then you should expose a web method instead and call it asynch. — Nikki9696
– Nikki9696, Commented Nov 3, 2011 at 15:32

Bryan Denny · Accepted Answer · 2014-11-19 20:05:29Z

13

var newOption = "<option value='"+"1"+"'>Some Text</option>"; $("#ddlCategory").append(newOption);

edited Nov 19, 2014 at 20:05

Bryan Denny

27.6k33 gold badges111 silver badges125 bronze badges

answered Nov 3, 2011 at 15:15

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

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

1 Comment

DenaliHardtail Over a year ago

This worked. I also changed from using the control ID to using a class name. The selector change did not work by itself.

Community · Accepted Answer · 2017-05-23 12:09:27Z

You can try

$("#ddlCategory").append($("<option value='123'>Some Text</option>");

Or

 $('#ddlCategory'). append($("<option></option>"). attr("value", "123"). text("Some Text"));

2nd code snippet from this question What is the best way to add options to a select from an array with jQuery?

user369142 · Accepted Answer · 2011-11-03 15:14:34Z

Have you tested that 1) your jquery is correct and works in a flat HTML file and 2) that you are using the correct Id - ASP.NET changes Ids dynamically on elements that runat="server", so you might want to try:

$('#<%=ddlCategory.ClientID%>').append(...etc etc

That will get you the correct Id from the ASP.NET page class.

Remembered that during debug. I'm now using a class selector instead of id.

Milan Jaric · Accepted Answer · 2011-11-03 15:14:48Z

What if you change it to

$("#ddlCategory").append($("<option></option>").attr("value", "1").text("Some Text"));

Community · Accepted Answer · 2017-05-23 12:25:17Z

Trying to add options to an ASP.Net dropdown list with client-side code is a bad idea. It introduces all sorts of postback problems. See this link for more details. You should either populate the dropdown completely client side, or trigger a partial postback to fill the list.

Collectives™ on Stack Overflow

How do I add an option to a dropdown list using jQuery?

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Linked

Related