IE и JQuery: .html () убирает теги

Question

У меня есть Страна, Регионы и Города.Когда пользователь изменяет выбор страны, он отправляет запрос AJAX и получает данные, которые выглядят следующим образом:

<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>

Затем я обновляю 2 других выбора

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

Все это работает простохорошо во всех браузерах, кроме IE (какой сюрприз).В IE .html () действует так, как будто это .text () и удаляет все теги, оставляя только текст.Может кто-нибудь посоветовать, как с этим бороться?

Answer 1

Ваш HTML-код недействителен. Вы не можете иметь тег option внутри div.

Пришлите ваш ответ вот так.

<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>

Ваш JavaScript выглядит хорошо, просто измените HTML-ответ, он будет работать нормально.

Answer 2

<option> не является допустимым тегом как дочерний элемент <div>.Поэтому IE (правильно, я полагаю) удаляет его в innerHTML (и, следовательно, .html()) и делает вид, что вы не допустили этой ошибки.

Вместо этого используйте <select>, чтобы удержать <option> теги.