我创建了这个简单的html文件来构建基本的产品配置器（受http://product-configuration.hekkiez.nl/a-simple-product-configurator-for-the-web/启发）。 选择你想要的范围风格，然后选择颜色＆amp;完成，然后根据范围的类型，相应地填充以下选项。或者至少他们曾经...... 我有这个工作了2天，现在我不能让它比选择范围/颜色/完成更进一步，好像JS代码不工作或没有“加载”。 我在搜索时尝试了很多东西。将JS代码移动到头部，在div中，检查缺少的字符等，没有运气。 如果有人能发现明显的错误，我会非常感激！
<!DOCTYPE html>
<html>
<head> </head>
<body >
<h3>Configure your Range</h3>
<form name="Test_Configurator">
<table>
<p>
Your range: <select name="Range" onchange="setOvens(this.value); setTop(this.value); setLeft(this.value); setRight(this.value); setOption_L2(this.value); setOption_L1(this.value); setOption_R1(this.value); setOption_R2(this.value);" >
<option value=" " selected="selected">Select your range</option>
<option value="1">Cormatin</option>
<option value="2">Rully</option>
<option value="3">Cluny</option>
<option value="4">Cluny 1400 - Right</option>
<option value="20">Cluny 1400 - Left</option>
<option value="5">Cluny 1800</option>
<option value="6">Chagny</option>
<option value="7">Chagny 1400 - Right</option>
<option value="21">Chagny 1400 - Left</option>
<option value="8">Chagny 1800</option>
<option value="9">Volnay</option>
<option value="10">Vougeot</option>
<option value="11">Chassagne</option>
<option value="12">Chambertin</option>
<option value="13">Saulieu</option>
<option value="14">Savigny</option>
<option value="15">Sully</option>
<option value="16">Fontenay</option>
<option value="17">Citeaux</option>
<option value="18">Sully 1800 - Right</option>
<option value="22">Sully 1800 - Left</option>
<option value="19">Sully 2200</option>
</select>
</p>
<p>
Color: <select name="Range_color" ;">
<option value=" " selected="selected"></option>
<option value="1">Anthracite</option>
<option value="2">Armor</option>
<option value="3">Stainless Steel</option>
<option value="4">White</option>
<option value="5">French Blue</option>
<option value="6">Portuguese Blue</option>
<option value="7">Delft Blue</option>
<option value="8">Coral Blue</option>
<option value="9">Earthenware Grey</option>
<option value="10">Ivory</option>
<option value="11">Quartz Pink</option>
<option value="12">Provence Yellow</option>
<option value="13">Black</option>
<option value="14">Chocolate</option>
<option value="15">Marron Glace</option>
<option value="16">Frangipane</option>
<option value="17">Burgundy Red</option>
<option value="18">Cherry Red</option>
<option value="19">Terracotta</option>
<option value="20">Tangerine</option>
<option value="21">Dark Green</option>
<option value="22">Olive Green</option>
<option value="23">Sologne Green</option>
<option value="24">Limetree Green</option>
</select>
</p>
<p>
Finishes: <select name="Finishes" ;">
<option value=" " selected="selected"></option>
<option value="1">Brass</option>
<option value="2">Nickel</option>
<option value="3">Chrome</option>
<option value="4">Brushed Stainless</option>
<option value="5">Matt Chrome</option>
</select>
</p>
<p>
Ovens: <select name="Ovens" ;">
<option value=" " selected="selected"></option>
</select>
</p>
<p>(Optional) Select the option for each side cupboard -
Left: <select name="Left" ;">
<option value=" " selected="selected"></option>
</select>
</p>
<p>(Optional) Select the option for each side cupboard -
Right: <select name="Right" ;">
<option value=" " selected="selected"></option>
</select>
</p>
<p>
Top: <select name="Top" ;" >
<option value=" " selected="selected"></option>
</select>
</p>
<p>Select the first option on the left side of your range:
Option_L2: <select name="Option_L2" ;" >
<option value=" " selected="selected"></option>
</select>
</p>
<p>Select the second option on the left side of your range:
Option_L1: <select name="Option_L1" ;">
<option value=" " selected="selected"></option>
</select>
</p>
<p>Select the first option on the right side of your range:
Option_R1: <select name="Option_R1" ;" >
<option value=" " selected="selected"></option>
</select>
</p>
<p>Select the second option on the right side of your range:
Option_R2: <select name="Option_R2" ;" >
<option value=" " selected="selected"></option>
</select>
</p>
</form>
</body>
</html>
<script type="text/javascript">
function setOvens(Range) {
var dropbox = document.Test_Configurator.Ovens;
dropbox.options.length = 0;
dropbox.options[dropbox.options.length] = new Option(' ','0');
if (Range == "1" || Range =="2" || Range =="9" || Range =="10" || Range =="11" || Range =="12" || Range =="13" || Range =="14" || Range =="16" || Range =="17") {
dropbox.options[dropbox.options.length] = new Option('Gas Oven','1');
dropbox.options[dropbox.options.length] = new Option('Convection Electric Oven','2');
}
if (Range == "3" || Range == "4" || Range == "5" || Range == "20") {
dropbox.options[dropbox.options.length] = new Option('2 Gas Ovens','3');
dropbox.options[dropbox.options.length] = new Option('1 Gas & 1 Electric Ovens','4');
dropbox.options[dropbox.options.length] = new Option('1 Gas & 1 Convection Electric Ovens','5');
}
if (Range == "6" || Range =="7" || Range =="8" || Range =="21" ) {
dropbox.options[dropbox.options.length] = new Option('1 Grill Oven, 1 Gas & 1 Electric Ovens','6');
dropbox.options[dropbox.options.length] = new Option('1 Grill Oven, 1 Gas & 1 Convection Electric Ovens','7');
dropbox.options[dropbox.options.length] = new Option('1 Grill Oven, 1 Electric & 1 Convection Electric Ovens','8');
dropbox.options[dropbox.options.length] = new Option('1 Grill Oven, 2 Electric Ovens','9');
}
if (Range == "15" || Range =="18" || Range =="19" || Range =="22" ) {
dropbox.options[dropbox.options.length] = new Option('2 Gas Ovens','10');
dropbox.options[dropbox.options.length] = new Option('1 Gas & 1 Convection Electric Ovens','11');
dropbox.options[dropbox.options.length] = new Option('2 Convection Electric Ovens','21');
}
}
function setLeft(Range) {
var dropbox = document.Test_Configurator.Left;
dropbox.options.length = 0;
dropbox.options[dropbox.options.length] = new Option(' ','0');
if (Range == "14" || Range =="17" ) {
dropbox.options[dropbox.options.length] = new Option('Vertical Convection Electric Oven','1');
}
if (Range == "20" || Range =="5" || Range =="9" ||Range == "21" || Range =="8" || Range == "11" || Range =="16" || Range == "22" || Range =="19" ) {
dropbox.options[dropbox.options.length] = new Option('Storage Cupboard','2');
dropbox.options[dropbox.options.length] = new Option('Warming Cupboard / Simmer Oven','3');
}
}
function setRight(Range) {
var dropbox = document.Test_Configurator.Right;
dropbox.options.length = 0;
dropbox.options[dropbox.options.length] = new Option(' ','0');
if (Range == "13" ) {
dropbox.options[dropbox.options.length] = new Option('Vertical Convection Electric Oven','4');
}
if (Range == "4" || Range =="5" || Range == "7" || Range =="10" || Range == "12" || Range =="16" || Range == "17" || Range =="18" || Range =="19" ) {
dropbox.options[dropbox.options.length] = new Option('Storage Cupboard','5');
dropbox.options[dropbox.options.length] = new Option('Warming Cupboard / Simmer Oven','6');
}
}
function setTop(Range) {
var dropbox = document.Test_Configurator.Top;
dropbox.options.length = 0;
dropbox.options[dropbox.options.length] = new Option(' ','0');
if (Range == "1" || Range =="2") {
dropbox.options[dropbox.options.length] = new Option('Classique 3 burners','1');
dropbox.options[dropbox.options.length] = new Option('Classique 4 burners','2');
dropbox.options[dropbox.options.length] = new Option('Tradition 2 burners + Simmer Plate','3');
}
if (Range == "3" ||Range == "6" ||Range == "9" || Range =="10" ) {
dropbox.options[dropbox.options.length] = new Option('Classique 5 burners','4');
dropbox.options[dropbox.options.length] = new Option('Tradition 4 burners + Simmer Plate','5');
}
if (Range == "4" ||Range == "7" ) {
dropbox.options[dropbox.options.length] = new Option('Classique 5 burners','10');
dropbox.options[dropbox.options.length] = new Option('Tradition 4 burners + Simmer Plate','11');
}
if (Range == "20" ||Range == "21" ) {
dropbox.options[dropbox.options.length] = new Option('Classique 5 burners','8');
dropbox.options[dropbox.options.length] = new Option('Tradition 4 burners + Simmer Plate','9');
}
if (Range == "5" ||Range == "8" ) {
dropbox.options[dropbox.options.length] = new Option('Classique 5 burners','20');
dropbox.options[dropbox.options.length] = new Option('Tradition 4 burners + Simmer Plate','21');
}
if (Range == "11" || Range =="14") {
dropbox.options[dropbox.options.length] = new Option('Classique 3 burners','12');
dropbox.options[dropbox.options.length] = new Option('Classique 4 burners','13');
dropbox.options[dropbox.options.length] = new Option('Tradition 2 burners + Simmer Plate','14');
}
if (Range == "12" || Range =="13") {
dropbox.options[dropbox.options.length] = new Option('Classique 3 burners','15');
dropbox.options[dropbox.options.length] = new Option('Classique 4 burners','16');
dropbox.options[dropbox.options.length] = new Option('Tradition 2 burners + Simmer Plate','17');
}
if (Range == "15" ||Range == "16" ||Range == "17" ) {
dropbox.options[dropbox.options.length] = new Option('Classique 3 burners','18');
dropbox.options[dropbox.options.length] = new Option('Tradition 2 burners + Simmer Plate','19');
}
if (Range == "18" ) {
dropbox.options[dropbox.options.length] = new Option('Classique 3 burners','24');
dropbox.options[dropbox.options.length] = new Option('Tradition 2 burners + Simmer Plate','25');
}
if (Range == "22" ) {
dropbox.options[dropbox.options.length] = new Option('Classique 3 burners','22');
dropbox.options[dropbox.options.length] = new Option('Tradition 2 burners + Simmer Plate','23');
}
if (Range == "19" ) {
dropbox.options[dropbox.options.length] = new Option('Classique 3 burners','26');
dropbox.options[dropbox.options.length] = new Option('Tradition 2 burners + Simmer Plate','27');
}
}
function setOption_L2(Range) {
var dropbox = document.Test_Configurator.Option_L2;
dropbox.options.length = 0;
dropbox.options[dropbox.options.length] = new Option(' ','0');
if (Range == "22" || Range =="19" ) {
dropbox.options[dropbox.options.length] = new Option('2 x 11,000 BTU Burners','1');
dropbox.options[dropbox.options.length] = new Option('2 x 15,000 BTU Burners','2');
dropbox.options[dropbox.options.length] = new Option('1 x 18,000 BTU Burner','3');
dropbox.options[dropbox.options.length] = new Option('Simmer Plate','4');
dropbox.options[dropbox.options.length] = new Option('Electric Plancha','5');
dropbox.options[dropbox.options.length] = new Option('Gas Grill','6');
dropbox.options[dropbox.options.length] = new Option('Stainless Steel Worktop','7');
}
}
function setOption_L1(Range) {
var dropbox = document.Test_Configurator.Option_L1;
dropbox.options.length = 0;
dropbox.options[dropbox.options.length] = new Option(' ','0');
if (Range =="15") {
dropbox.options[dropbox.options.length] = new Option('2 x 11,000 BTU Burners','8');
dropbox.options[dropbox.options.length] = new Option('2 x 15,000 BTU Burners','9');
dropbox.options[dropbox.options.length] = new Option('Electric Plancha','12');
dropbox.options[dropbox.options.length] = new Option('Stainless Steel Worktop','14');
}
if (Range =="14" || Range == "17" || Range =="18" || Range =="19" || Range =="22" ) {
dropbox.options[dropbox.options.length] = new Option('2 x 11,000 BTU Burners','8');
dropbox.options[dropbox.options.length] = new Option('2 x 15,000 BTU Burners','9');
dropbox.options[dropbox.options.length] = new Option('1 x 18,000 BTU Burner','10');
dropbox.options[dropbox.options.length] = new Option('Simmer Plate','11');
dropbox.options[dropbox.options.length] = new Option('Electric Plancha','12');
dropbox.options[dropbox.options.length] = new Option('Stainless Steel Worktop','14');
}
if (Range == "20" || Range =="5" || Range =="21" || Range =="8" || Range == "11" || Range =="16" || ) {
dropbox.options[dropbox.options.length] = new Option('2 x 11,000 BTU Burners','8');
dropbox.options[dropbox.options.length] = new Option('2 x 15,000 BTU Burners','9');
dropbox.options[dropbox.options.length] = new Option('1 x 18,000 BTU Burner','10');
dropbox.options[dropbox.options.length] = new Option('Simmer Plate','11');
dropbox.options[dropbox.options.length] = new Option('Electric Plancha','12');
dropbox.options[dropbox.options.length] = new Option('Gas Grill','13');
dropbox.options[dropbox.options.length] = new Option('Stainless Steel Worktop','14');
}
}
function setOption_R1(Range) {
var dropbox = document.Test_Configurator.Option_R1;
dropbox.options.length = 0;
dropbox.options[dropbox.options.length] = new Option(' ','0');
if (Range =="15") {
dropbox.options[dropbox.options.length] = new Option('2 x 11,000 BTU Burners','8');
dropbox.options[dropbox.options.length] = new Option('2 x 15,000 BTU Burners','9');
dropbox.options[dropbox.options.length] = new Option('Electric Plancha','12');
dropbox.options[dropbox.options.length] = new Option('Stainless Steel Worktop','14');
}
if (Range =="14" || Range == "17" || Range =="18" || Range =="19" || Range =="22" ) {
dropbox.options[dropbox.options.length] = new Option('2 x 11,000 BTU Burners','8');
dropbox.options[dropbox.options.length] = new Option('2 x 15,000 BTU Burners','9');
dropbox.options[dropbox.options.length] = new Option('1 x 18,000 BTU Burner','10');
dropbox.options[dropbox.options.length] = new Option('Simmer Plate','11');
dropbox.options[dropbox.options.length] = new Option('Electric Plancha','12');
dropbox.options[dropbox.options.length] = new Option('Stainless Steel Worktop','14');
}
if (Range == "20" || Range =="5" || Range =="21" || Range =="8" || Range == "11" || Range =="16" || ) {
dropbox.options[dropbox.options.length] = new Option('2 x 11,000 BTU Burners','8');
dropbox.options[dropbox.options.length] = new Option('2 x 15,000 BTU Burners','9');
dropbox.options[dropbox.options.length] = new Option('1 x 18,000 BTU Burner','10');
dropbox.options[dropbox.options.length] = new Option('Simmer Plate','11');
dropbox.options[dropbox.options.length] = new Option('Electric Plancha','12');
dropbox.options[dropbox.options.length] = new Option('Gas Grill','13');
dropbox.options[dropbox.options.length] = new Option('Stainless Steel Worktop','14');
}
}
function setOption_R2(Range) {
var dropbox = document.Test_Configurator.Option_R2;
dropbox.options.length = 0;
dropbox.options[dropbox.options.length] = new Option(' ','0');
if (Range == "22" || Range =="19" ) {
dropbox.options[dropbox.options.length] = new Option('2 x 11,000 BTU Burners','1');
dropbox.options[dropbox.options.length] = new Option('2 x 15,000 BTU Burners','2');
dropbox.options[dropbox.options.length] = new Option('1 x 18,000 BTU Burner','3');
dropbox.options[dropbox.options.length] = new Option('Simmer Plate','4');
dropbox.options[dropbox.options.length] = new Option('Electric Plancha','5');
dropbox.options[dropbox.options.length] = new Option('Gas Grill','6');
dropbox.options[dropbox.options.length] = new Option('Stainless Steel Worktop','7');
}
}
</script>
答案 0 :(得分：1)
仅在HTML标记中，我看到了很多缺少的元素（我认为），这些元素是您的程序工作所需要的。
如果你看一下你的HTML，你会发现很多这些：
<select name="Option_L2" ;" >
我想你错过了其他的onchange();
请检查这一切是否正确并且您的标记一切正常，如果在使用您的新脚本编辑问题之后仍然无法正常工作：）
Grtz。 Sidney Liebrand
答案 1 :(得分：1)
以下代码行不正确
if (Range == "20" || Range =="5" || Range =="21" || Range =="8" || Range == "11" || Range =="16" || ) {
if (Range == "20" || Range =="5" || Range =="21" || Range =="8" || Range == "11" || Range =="16" || ) {
如果您遇到这些问题，请开始使用浏览器的开发者工具。所有主流浏览器都支持调试功能。
答案 2 :(得分：0)
你的代码中有很多拼写错误
例如行：
Color: <select name="Range_color" ;">
在select标记中有额外的;"。