HTML select options not displaying when changed with JavaScript
<p>I have two select elements created with basic HTML:</p>

<pre><code>                         &lt;div class="input-field col s12 m6 l6"&gt;
                            &lt;select name="state"                               onchange="showLocalGovt(this.value)" class = 'validate'&gt;
                                &lt;option value=""&gt;Select your State&lt;/option&gt;
                                &lt;option value="Abia"&gt;Abia&lt;/option&gt;
                                &lt;option value="Adamawa"&gt;Adamawa&lt;/option&gt;
                                &lt;option value="Akwa Ibom"&gt;Akwa Ibom&lt;/option&gt;
                            &lt;/select&gt;
                            &lt;label for="state"&gt;State&lt;/label&gt;
                        &lt;/div&gt;


                    &lt;div class="row"&gt;
                        &lt;div class="input-field col s12 m6 16"&gt;
                            &lt;select id="LocalGovt" name="LocalGovt" class  = 'validate'&gt;&lt;option&gt;Select Your Local Government&lt;/option&gt;&lt;/select&gt;
                            &lt;label for="LocalGovt"&gt;Select Your Local Government&lt;/label&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
</code></pre>

<p>the way this is supposed to work is , depending on the state chosen , I'm using javascript to populate the second select element. </p>

<pre><code>function showLocalGovt(str)
</code></pre>

<p>{</p>

<pre><code>if (str=="")
  {
  document.getElementById("LocalGovt").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
    xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
    {
        var local_govts =xmlhttp.responseText.split(',');
        alert(local_govts);
        /*for(var i = 0;i&lt;local_govts.length; i++)
        {
            document.getElementById('LocalGovt').options.add(new Option(local_govts[i], local_govts[i]));
            alert(local_govts[i]);
        }*/
        for (var i = 0; i&lt;local_govts.length; i++){
            var opt = document.createElement('option');
            opt.value = local_govts[i];
            opt.innerHTML = local_govts[i];
            document.getElementById('LocalGovt').appendChild(opt);
        }
    }
  }
xmlhttp.open("GET","local_govt_db.php?state="+str,true);
xmlhttp.send();
</code></pre>

<p>}</p>

<p>The problem is the second select element doesn't get updated. I'm certain the JavaScript returns an array of the right values — I've confirmed with alerts. Also, when I use the Chrome developer tools, I can see the updated list of options. But it still doesn’t display on the webpage</p>