我正在构建一个表单，该表单应该建议用户根据其做出的第一个选择来选择某个计划。我从 youtube 教程中获得了这段代码并进行了一些编辑，但它不再起作用了。主要问题是在第一个字段中选择一个选项后，第二个选择下拉字段不会被填写。
<html>
<head>
<script>
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "daily"){
var optionArray = ["plan1|Plan 1","plan2|Plan 2","plan3|Plan 3"];
} else if(s1.value == "weekly"){
var optionArray = ["plan2|Plan 2","plan1|Plan 1","plan3|Plan 3"];
} else if(s1.value == "biweekly"){
var optionArray = ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"];
} else if(s1.value == "monthly"){
var optionArray = ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"];
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Frequency of playing
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="biweekly">Bi-Weekly</option>
<option value="monthly">Monthly</option>
</select>
<hr />
We have determined a plan for you that will suit you best, feel free to select another plan:
<select id="slct2" name="slct2"></select>
<hr />
</body>
</html>
最佳答案
为什么不起作用？
你缺少一个闭包
} else if(s1.value == "monthly"){
var optionArray = ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"];
} //Missing closure
建议
如果您更符合逻辑地存储值，则可以省略所有 if 语句。
例子
<script>
mValues = {
"daily": ["plan1|Plan 1","plan2|Plan 2","plan3|Plan 3"],
"weekly": ["plan2|Plan 2","plan1|Plan 1","plan3|Plan 3"],
"biweekly" : ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"],
"monthly": ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"]
}
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
var optionArray = mValues[s1.value];
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
关于javascript - 在 html 和 javascript 中动态填充选择字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31292796/