Question

I have Country, Regions and Cities selects. When a user changes the Country select, it sends an AJAX request and receives data that looks like that:

<div class="regionData">
  <option value="1">Region name</option>
  <option value="2">Region name 2</option>
</div>

<div class="cityData">
  <option value="1">City 1</option>
  <option value="2">City 2</option>
</div>

Then I update the other 2 selects

$("#Estate_region_id").html($(html).filter(".regionData").html());
$("#Estate_city_id").html($(html).filter(".cityData").html());

It all works just fine in all the browsers except for IE (what a surprise). In IE .html() acts as though it is .text() and strips all the tags, leaving only text. Can anyone advice on how to deal with this?

Answer 1

Your html is invalid. You cannot have option tag inside div.

Send your response like this.

<select class="regionData">
  <option value="1">Region name</option>
  <option value="2">Region name 2</option>
</select>

<select class="cityData">
  <option value="1">City 1</option>
  <option value="2">City 2</option>
</select>

Your JavaScript looks good just modify the response html it will work fine.