How to Add/Remove items from a dropdownlist using JQuery

< asp: DropDownList ID="ddlMyCombo" runat="server" ></asp: DropDownList > 

In order to clear a dropdownlist items using JQuery:
$('#ddlMyCombo >option').remove();

for more about the JQuery Seletor expressions take a look on my post JQuery Selector Expressions Demystified

What I am doing here is selecting all the option elements that are child of the element with ID “#ddlMyCombo” which is the dropdownlist id and then deleting them. Doing this is gonna clear all elements of the dropdownlist.

So now in order to add items again to the dropdownlist, we will simply append options HTML elements to our test combo
var myCombo= $('#ddlMyCombo');
myCombo.append($('< option > </option>').val(1).html(option1Text));

What I have done here is that I have selected the dropdownlist first just for convenience. It is similar to saying
document.getElementById('ddlMyCombo')
I then start appending HTML option items to my dropdownlist and set the item value and text.

About these ads

9 Responses to How to Add/Remove items from a dropdownlist using JQuery

  1. Naveed says:

    Hi its good piece of work also I’ve done some work with asp.net web service and Jquery.

  2. Steeve L. says:

    Neat piece of code. Thanks

  3. Sedat Kumcu says:

    Thanks. Great solve. Best regards.

  4. Tahir Idrees says:

    Another simple way:
    $(“#myDDL”).removeOption(/./);

  5. Peter Kelly says:

    Thanks for this, very handy. I’ve been looking for a way to remove an item from a drop down list when the page loads based on a certain condition. I can modify this to get what I want.

    Cheers,
    Peter

  6. Muzi says:

    Cool thanks

  7. great, thanks for this!
    James

  8. Flavio Muniz says:

    This is remove the first item?

  9. jatindhoot says:

    Nice one liner————

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: