javascript - 无法使用 javascript 填充 2 个下拉列表

Question

我正在尝试使用 JavaScript 填充 2 个下拉列表。第二个最初是空的，将根据第一个的选择来填充。

列表的内容将使用 django 呈现，并且 JavaScript 代码将根据“op”的呈现值来通知是否必须填充第二个下拉列表。

我发现的问题是，一切正常，直到需要填写第二个列表，但这种情况从未发生过。但是，如果我在 html 中对第一个列表进行硬编码，并对其填充的 javascript 部分进行注释，则在第一个列表中选择一个项目后，第二个列表将被完美填充。

在同一次执行中向不同的下拉列表添加两个选项是否有问题？

javascript函数

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 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> 

Answer 1

您可以通过以下方式执行此操作:

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);
    }
}

}