javascript - 无法使用javascript填充 2 dropdownlists

  显示原文与译文双语对照的内容
0 0

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

列表的内容将使用 Django 呈现,并且javascript代码将注意到它是否必须填充 2nd 个或者不要取决于"操作"的呈现值。

我发现的问题是,在 2nd 列表需要填充之前,所有的东西都可以以正常工作,从不发生。 但如果我硬编码html的第一个列表,并且注释了填充的javascript的一部分,在第一个列表中选择一个。

在同一执行过程中向不同的dropdownlists添加两次选项是否存在任何问题?

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> 
时间:原作者:6个回答

0 0

你可以通过以下方式执行这里操作:

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

}

原作者:
...