html - unable to populate 2 dropdownlists using javascript -

i trying populate 2 dropdown lists using javascript. 2nd 1 empty, , filled depending on selection of first one.

the content of lists rendered using django, , javascript code notice if has fill 2nd dropdownlist or not depending on rendered value of "op".

the problem find works fine until 2nd list needs filled, never happens. if hard-code first list @ html , comment part of javascript filled, after selection of item @ first list, second 1 filled.

is there problem in adding twice options different dropdownlists @ same execution?

javascript function

window.onload = function foo() {         var makeslist = document.getelementbyid('make');     var modelslist = document.getelementbyid('model');     var makestxt = "{{ makestxt }}";     var makes = makestxt.split("%");      var op = "{{ op }}";                             (i=0; makes.length; i++){          var makesvals = makes[i].split("$");          var option1 = new option(makesvals[1], makesvals[1], false, false);         makeslist.options[makeslist.length] = option1;      }     if(op == "1"){         var modelstxt = "{{ modelstxt }}";         var models = modelstxt.split("%");         (j=0; models.length; j++){          var modelsvals = models[j].split("$");          var option2 = new option(modelsvals[1], modelsvals[1], false, false);         modelslist.options[modelslist.length] = option2;          }     } } 

html form

<form action="" method="post" accept-charset="utf-8">      <select name="make" onchange="submit()" id="make">          <option>--</option>     </select>      <select name="model" onchange="submit()" id="model">          <option>choose model</option>      </select>  </form>  

you can :

window.onload = function foo() {     var makeslist = document.getelementbyid('make'); var modelslist = document.getelementbyid('model'); var makestxt = "{{ makestxt }}"; var makes = makestxt.split("%");  var op = "{{ op }}";                         (i=0; makes.length; i++){         var makesvals = makes[i].split("$");       var option1 = document.createelement("option");     option1.text = makesvals[1];     option1.value = makesvals[1];     makeslist.add(option1, null); } if(op == "1"){     var modelstxt = "{{ modelstxt }}";     var models = modelstxt.split("%");     (j=0; models.length; j++){      var modelsvals = models[j].split("$");      var option2 = document.createelement("option");     option2.text = modelsvals[1];     option2.value = modelsvals[1];     modelslist.add(option2, null);     } } 

}