1

我正在尝试使用 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>
4

1 回答 1

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

}

于 2013-07-24T08:24:14.840 回答