填充 3 个动态下拉列表
Populate 3 Dynamic Dropdowns
我有 3 个动态下拉列表，它们都是从前面的下拉列表中填充的。我的问题是当我对第三个下拉列表进行编程时，它会干扰我的第二个下拉列表，因此只有我的第一个下拉列表有效。这可能很简单，但我的编程技能非常有限。
这是我的代码：
<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Product1"){
var optionArray = ["|","50|50","80|80","100|100","120|120","150|150","200|200","250|250","300|300"];
} else if(s1.value == "Product2"){
var optionArray = ["|","50|50","80|80","100|100","120|120","150|150","200|200"];
} else if(s1.value == "Product3"){
var optionArray = ["|","50|50","80|80","100|100","120|120","150|150","200|200","250|250","300|300"];
} else if(s1.value == "Product4"){
var optionArray = ["|","50|50","80|80","100|100","120|120","150|150","200|200"];
}
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);
}
}
function populate(s1,s2,s3){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
var s3 = document.getElementById(s3);
s3.innerHTML = "";
if(s1.value == ("Product1") &s2.value == ("50")) {
var optionArray = ["|","100|100","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product1") &s2.value ==("80")) {
var optionArray = ["|","100|100","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product1") &s2.value ==("100")) {
var optionArray = ["|","100|100","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product1") &s2.value ==("120")) {
var optionArray = ["|","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product1") &s2.value ==("150")) {
var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product1") &s2.value ==("200")) {
var optionArray = ["|","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product1") &s2.value ==("250")) {
var optionArray = ["|","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product1") &s2.value ==("300")) {
var optionArray = ["|","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product2") &s2.value ==("50")) {
var optionArray = ["|","100|100","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product2") &s2.value ==("80")) {
var optionArray = ["|","100|100","120|120","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product2") &s2.value ==("100")) {
var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product2") &s2.value ==("120")) {
var optionArray = ["|","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product2") &s2.value ==("150")) {
var optionArray = ["|","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product2") &s2.value ==("200")) {
var optionArray = ["|","350|350","400|400","450|450"];
} else if(s1.value == ("Product3") &s2.value ==("50")) {
var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product3") &s2.value ==("80")) {
var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product3") &s2.value ==("100")) {
var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product3") &s2.value ==("120")) {
var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product3") &s2.value ==("150")) {
var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product3") &s2.value ==("200")) {
var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product3") &s2.value ==("200")) {
var optionArray = ["|","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product3") &s2.value ==("250")) {
var optionArray = ["|","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product3") &s2.value ==("250")) {
var optionArray = ["|","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product3") &s2.value ==("300")) {
var optionArray = ["|","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product4") &s2.value ==("50")) {
var optionArray = ["|","150|150","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product4") &s2.value ==("580")) {
var optionArray = ["|","200|200","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product4") &s2.value ==("100")) {
var optionArray = ["|","250|250","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product4") &s2.value ==("120")) {
var optionArray = ["|","300|300","350|350","400|400","450|450"];
} else if(s1.value == ("Product4") &s2.value ==("150")) {
var optionArray = ["|","350|350","400|400","450|450"];
} else if(s1.value == ("Product4") &s2.value ==("200")) {
var optionArray = ["|","450|450"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s3.options.add(newOption);
}
}
</script><body>
<h2>Choose Your Product</h2>
<hr />
Choose Product:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Product1">Product1</option>
<option value="Product2">Product2</option>
<option value="Product3">Product3</option>
<option value="Product4">Product4</option>
</select>
<hr />
Choose Depth:
<select id="slct2" name="slct2" onchange="populate('slct2' 'slct1','slct3')"></select>
<hr />
Choose Height:
<select id="slct3" name="slct3"></select>
<hr />
</body>您有两个主要的语法错误：
1-您有两个同名的函数！
2-第二个列表中函数参数的调用是错误的populate('slct2' 'slct1','slct3')" slct2和slct1之间应该有一个,。
查看此演示：http://jsbin.com/xameye/1/
您的代码中几乎没有语法错误，而且您使用了如此多的静态值来填充下拉选项，您能否纠正语法错误并简化代码，之后您将能够看到正确的结果或确切的错误。
相关文章：
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 无法使用PHP动态设置下拉列表中的值
- 如何根据对具有多行的先前列表的选择来动态加载下拉列表
- 基于所选下拉列表值创建动态复选框
- 无法使用国家/地区选择中的状态动态填充下拉列表
- AngularJS:使用ng-show/hide动态维护下拉列表的3种状态(InProgress、Success、Err
- webforms:在javascript中动态添加下拉列表选项
- HtmlService表单-动态下拉列表
- 动态下拉列表选项在添加多列后未填充
- 使用 JavaScript 创建动态下拉列表
- 引导下拉列表动态 ajax 列表项
- 动态更改的下拉列表不会刷新.(雾虫）
- 使用javascript中的append创建动态下拉列表
- 将下拉列表动态更改为文本字段opencart
- 通过下拉列表动态更新总数
- ASP:下拉列表动态更改
- 来自 JavaScript 问题的 ASP 下拉列表动态值
- 通过输入字段和下拉列表动态更新字段
- 使用下拉列表动态更改照片
- 从其他下拉列表动态填充html下拉列表
