基本的な製品コンフィギュレーターを構築するために、この単純な html ファイルを作成しました ( http://product-configuration.hekkiez.nl/a-simple-product-configurator-for-the-web/に触発されて)。必要な範囲のスタイルを選択してから、色と仕上げを選択すると、範囲のタイプに応じて、次のオプションがそれに応じて入力されます. または、少なくとも以前は...私はこれを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>