unable to populate 2 dropdownlists using javascript

Question

I am trying to populate 2 dropdown lists using javascript. The 2nd one is initially empty, and will be filled depending on the selection of the first one.

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

The problem I find is that everything works fine until the 2nd list needs to be filled, which never happens. But if I hard-code the first list at the html and comment the part of the javascript where it is filled, after the selection of an item at the first list, the second one is perfectly filled.

Is there any problem in adding twice options to different dropdownlists at the 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 }}";                        
    for (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("%");
        for (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>

Can you show what the code looks like with the template variables replaced by their values? — Barmar
– Barmar, Commented Jul 24, 2013 at 8:01
You're supposed to write it like this: for (i=0; i< makes.length; i++){ }. But that's only one problem; there are several others. Where's the event handler? — frenchie
– frenchie, Commented Jul 24, 2013 at 8:13

Ibrahim Attia · Accepted Answer · 2013-07-24 08:24:14Z

you can do this by :

window.onload = function foo() {    
var makeslist = document.getElementById('make');
var modelslist = document.getElementById('model');
var makestxt = "{{ makestxt }}";
var makes = makestxt.split("%"); 
var op = "{{ op }}";                        
for (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("%");
    for (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);
    }
}

}

Collectives™ on Stack Overflow

unable to populate 2 dropdownlists using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related