Ajax, Html: can't generate the content of SELECT tag

Question

i have the following html code

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

  </div>
</select>

i have the option "something", and i want to generate other options via Ajax. but if i try to this

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

it doesn't work, but

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

works fine, but i need to keep the first option. could you explain what is the problem? thanks

Answer 1

The C1 div is invalidly nested in the select element, at least according to your example.

Answer 2

You aren't allowed to place <div> elements within a <select> tag. Only <option> elements are allowed within <select>s.

To achieve what you're looking to do, try something like this:

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

If your goal is to have one static element in there and just replace the elements that would otherwise go in the <div>, what you're going to want to do is code the default options into your JS:

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

You can also have a dummy select that you pull that value from:

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

in conjunction with

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

Good luck!