CODEWITHSUNDEEP
jqueryajax
Ross
Ross

Reputation: 362

Selectlist text displays old values after changing with jQuery in IE

I've got 2 dropdowns, is for categories and one is for subcategories. When the category dropdown is changed the subcategory dropdown gets updated with jQuery/ajax to display new subcategories. It works great in Chrome but IE does not display the new values after being updated through jQuery. The odd thing is after selecting a new option the correct text shows up but when I have the list pulled down it displays the old text.

This is how I'm emptying and refilling the subcategory dropdown when the category changes:

   $('#testselectsubcat').empty().append(new Option("Pick a subcategory", 0));

   $.each(subcategories, function (index, subcat) {
       $('#testselectsubcat').append(new Option(subcat.name, subcat.id));
   });

Edit: forgot this part, might be important. The issue only happens with dropdowns added using jQuery after the page is loaded. I add the category dropdown to the page using .append() and the subcategory dropdown using .after().

How do I get it to work in IE?

Upvotes: 0

Views: 1015

Answers (2)

WebChemist
WebChemist

Reputation: 4411

Apparently IE doesn't work using the append method with new Option()

You could try to append $('<option/>').text(x).val(y) like:

$('#testselectsubcat').empty().append(
    $('<option/>').val(0).text("Pick a subcategory")
);

$.each(subcategories, function (index, subcat) {
    $('<option/>').val(subcat.id).text(subcat.name).appendTo('#testselectsubcat');
});

or see here for other ways using new Option() to work around IE

Upvotes: 0

AbdElrhman
AbdElrhman

Reputation: 52

well, you have to clear the subcategories drop down, like this

// C#:
subcategories.Items.Clear();
// and loaded with new data
 ....

// or clear or empty it using jQuery
 $('#subcategories').chilren().remove();
  $('#subcategories').empty();

Upvotes: 0

Related Questions