0

我创建了这个简单的 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>
4

3 回答 3

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" || ) {

如果您遇到此类问题，请开始使用浏览器的开发人员工具。所有主流浏览器都支持调试功能。

于 2013-10-15T16:38:38.980 回答
1

仅在您的 HTML 标记中，我就看到了很多缺失的元素（我认为）您的程序需要这些元素才能正常工作。

如果您查看您的 HTML，您会注意到其中很多：

<select name="Option_L2" ;" >

我在想你在onchange();这里想念其他人

请检查这是否全部正确并且您的标记是否一切正常，如果在那之后它仍然无法正常工作使用您的新脚本编辑您的问题:)

格兹。西德尼·李布兰德

于 2013-10-15T16:37:15.867 回答
0

你的代码中有很多错别字

例如这一行：

Color: <select name="Range_color" ;">

;"在选择标签中有一个额外的。

于 2013-10-15T16:39:49.780 回答