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

}

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

1 个答案: