Question

I’ve having this problem with some JavaScript code. I’ve simplified it in the error below because I’ve been able to pinpoint the problem by debugging.

HTML:

<select id="city_list_select" name="city">
    <div id="clist">
        <option>Select a Region First</option>
    </div>
</select>

JavaScript:

document.getElementById("clist").innerHTML = "<option>Test</option>";

I’m getting this error returned: TypeError: Cannot set property ‘innerHTML’ of null.
So it seems as if JavaScript can’t find that div there. I was able to work around the problem by removing the div and changing the JS to getElementById(“city_list_select”), but I would still like to figure out why the div isn’t working in case I come across a similar problem in the future.

Answer 1

Um… I don’t think you can have a DIV tag inside a SELECT tag. Try using the OPTION tag, or as you found out, replace all the OPTION tags using the SELECT tag’s innerHTML.

<select id="city_list_select" name="city">            
  <option id="option1">Select a Region First</option>     
</select>

And don’t forget that you can also use methods like appendChild to append new elements to existing ones.