HTML select options not displaying when changed with JavaScript

Question

I have two select elements created with basic HTML:

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


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

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

function showLocalGovt(str)

{

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 && xmlhttp.status==200)
    {
        var local_govts =xmlhttp.responseText.split(',');
        alert(local_govts);
        /*for(var i = 0;i<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<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();

}

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

will you log the output of local_govts as comment in your question — Ashok Shah, Nov 23 '16 at 00:10
I suppose it's just a typo in the question, but there isn't a closing brace for the `for` statement. — RyanZim, Nov 23 '16 at 00:10
local_govts is an array of comma seperated values.. just like this "Select Your Local Government,Brass,Ekeremor,Kolokuma/Opokuma,Nembe,Ogbia,Sagbama,Southern Ijaw,Yenagoa" — lukman, Nov 23 '16 at 00:20
the showLocalGovt function is the function that initializes js ajax call — lukman, Nov 23 '16 at 00:26
nothing wrong with your function. only need to clear select2 just before loop [jsfiddle](https://jsfiddle.net/rizkidwip/owL3pox0/1/) — RizkiDPrast, Nov 23 '16 at 00:49

score 0 · Answer 1 · answered Nov 23 '16 at 00:53

0

Need to clear 2nd select elements before loop. please try this one:

document.getElementById("LocalGovt").innerHTML="";    
for (var i = 0; i<local_govts.length; i++){
     ....         
}

answered Nov 23 '16 at 00:53

RizkiDPrast

1,695
1
14
21

I tried this .. It's not working . the function actually works a new HTML file I created but not when I try to implement it in my project – lukman Nov 23 '16 at 01:02
Hi.. I found out the problem was bigger than I thought.. I'm actually unable to edit the DOM at all with js.. No element attribute can be changed.. Any help with this ? – lukman Nov 24 '16 at 20:55
wau, need to know a bit more about your project i guess. If possible try to open a new question if you already know the specific problem you might encounter – RizkiDPrast Nov 24 '16 at 22:03

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

I solved this by re-initializing the select element with materialize because it overrides the browser's default select elements

    $('#LocalGovt').material_select();

Found my answer here:

How to dynamically modify <select> in materialize css framework

edited May 23 '17 at 12:24

Community

1
1

answered Nov 27 '16 at 19:44

lukman

95
1
7

HTML select options not displaying when changed with JavaScript

2 Answers2