Ajax, Html: не может сгенерировать содержимое тега SELECT

Question

у меня есть следующий HTML-код

<select id="c0"  name="countries" onchange="show_other()">
  <option value="1">something</option>
  <div id="c1">

  </div>
</select>

У меня есть опция "что-то", и я хочу создать другие опции через Ajax. но если я попытаюсь это

  document.getElementById('c1').innerHTML = xmlhttp.responseText 

это не работает, но

 document.getElementById('c0').innerHTML = xmlhttp.responseText 

работает нормально, но мне нужно сохранить первый вариант. не могли бы вы объяснить, в чем проблема? спасибо

Answer 1

Вам не разрешено размещать <div> элементы в теге <select>. В <select> s допускаются только <option> элементы.

Чтобы достичь того, что вы хотите сделать, попробуйте что-то вроде этого:

document.getElementById('c0').innerHTML += xmlhttp.responseText;

Если ваша цель состоит в том, чтобы иметь один статический элемент и просто заменить элементы, которые в противном случае были бы добавлены в <div>, то вам нужно кодировать параметры по умолчанию в JS:

document.getElementById('c0').innerHTML = '<option value="1">something</option>' + xmlhttp.responseText;

У вас также может быть фиктивный выбор, из которого вы извлекаете это значение:

document.getElementById('c0').innerHTML = document.getElementById('dummyselect').innerHTML + xmlhttp.responseText;

в сочетании с

<select id="dummyselect" style="display:none;">
    <option value="1">something</option>
</select>
<select id="c0"></select>

Удачи!

Answer 2

Элемент C1 недопустимо вложен в элемент select, по крайней мере, в соответствии с вашим примером.