I create a calculator of services on the site. There was a problem with the binding of the image to the select. I want a specific picture to be displayed with a specific item selected. Tell me, please, how to do this? Below is the code:

<script> var h = Array(); function windowData(){ h[1] = new Object; h[1].id = 1; h[1].name = "ΠžΠ΄ΠΈΠ½Π°Ρ€Π½ΠΎΠ΅ Π³Π»ΡƒΡ…ΠΎΠ΅"; h[1].price = 5900; h[1].url = "/images/stories/okna/closed.jpg"; h[2] = new Object; h[2].id = 2; h[2].name = "ΠžΠ΄ΠΈΠ½Π°Ρ€Π½ΠΎΠ΅ ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎΠ΅"; h[2].price = 9000; h[2].url = "/images/stories/okna/t1_1.jpg"; h[3] = new Object; h[3].id = 3; h[3].name = "ΠžΠ΄ΠΈΠ½Π°Ρ€Π½ΠΎΠ΅ ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-ΠΎΡ‚ΠΊΠΈΠ΄Π½ΠΎΠ΅"; h[3].price = 9800; h[3].url = "/images/stories/okna/t1_2.jpg"; h[4] = new Object; h[4].id = 4; h[4].name = "Π”Π²ΠΎΠΉΠ½ΠΎΠ΅(1 створка поворотная, 1 створка ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-откидная)"; h[4].price = 11700; h[4].url = "/images/stories/okna/t2_1.jpg"; h[5] = new Object; h[5].id = 5; h[5].name = "Π”Π²ΠΎΠΉΠ½ΠΎΠ΅(1 створка глухая, 1 створка поворотная)"; h[5].price = 9400; h[5].url = "/images/stories/okna/t2_21.jpg"; h[6] = new Object; h[6].id = 6; h[6].name = "Π”Π²ΠΎΠΉΠ½ΠΎΠ΅(2 створки ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½Ρ‹Π΅)"; h[6].price = 11000; h[6].url = "/images/stories/okna/t2_22.jpg"; h[7] = new Object; h[7].id = 7; h[7].name = "Π”Π²ΠΎΠΉΠ½ΠΎΠ΅(1 створка глухая, 1 створка ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-откидная)"; h[7].price = 10200; h[7].url = "/images/stories/okna/t2_12.jpg"; h[8] = new Object; h[8].id = 8; h[8].name = "Π’Ρ€ΠΎΠΉΠ½ΠΎΠ΅(2 створки Π³Π»ΡƒΡ…ΠΈΠ΅, 1 ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-откидная)"; h[8].price = 11300; h[8].url = "/images/stories/okna/t3_1.jpg"; h[9] = new Object; h[9].id = 9; h[9].name = "Π’Ρ€ΠΎΠΉΠ½ΠΎΠ΅(2 створки ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½Ρ‹Π΅, 1 створка глухая)"; h[9].price = 11700; h[9].url = "/images/stories/okna/t3_2.jpg"; h[10] = new Object; h[10].id = 10; h[10].name = "Π’Ρ€ΠΎΠΉΠ½ΠΎΠ΅(2 створки ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½Ρ‹Π΅, 1 ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-откидная)"; h[10].price = 12400; h[10].url = "/images/stories/okna/t3_3.jpg"; h[11] = new Object; h[11].id = 11; h[11].name = "Π’Ρ€ΠΎΠΉΠ½ΠΎΠ΅(1 створка глухая, 1 створка откидная, 1 створка ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-откидная)"; h[11].price = 12000; h[11].url = "/images/stories/okna/t3_31.jpg"; h[12] = new Object; h[12].id = 12; h[12].name = "Балконная Π΄Π²Π΅Ρ€ΡŒ(поворотная)"; h[12].price = 10200; h[12].url = "/images/stories/okna/t5_1.jpg"; h[13] = new Object; h[13].id = 13; h[13].name = "ΠžΠ΄ΠΈΠ½Π°Ρ€Π½ΠΎΠ΅ Π³Π»ΡƒΡ…ΠΎΠ΅"; h[13].price = 3250; h[13].url = "/images/stories/okna/closed.jpg"; h[14] = new Object; h[14].id = 14; h[14].name = "ΠžΠ΄ΠΈΠ½Π°Ρ€Π½ΠΎΠ΅ ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎΠ΅"; h[14].price = 4650; h[14].url = "/images/stories/okna/t1_1.jpg"; h[15] = new Object; h[15].id = 15; h[15].name = "ΠžΠ΄ΠΈΠ½Π°Ρ€Π½ΠΎΠ΅ ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-ΠΎΡ‚ΠΊΠΈΠ΄Π½ΠΎΠ΅"; h[15].price = 5850; h[15].url = "/images/stories/okna/t1_2.jpg"; h[16] = new Object; h[16].id = 16; h[16].name = "Π”Π²ΠΎΠΉΠ½ΠΎΠ΅(1 створка поворотная, 1 створка ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-откидная)"; h[16].price = 5850; h[16].url = "/images/stories/okna/t2_1.jpg"; h[17] = new Object; h[17].id = 17; h[17].name = "Π”Π²ΠΎΠΉΠ½ΠΎΠ΅(1 створка глухая, 1 створка поворотная)"; h[17].price = 4250; h[17].url = "/images/stories/okna/t2_21.jpg"; h[18] = new Object; h[18].id = 18; h[18].name = "Π”Π²ΠΎΠΉΠ½ΠΎΠ΅(2 створки ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½Ρ‹Π΅)"; h[18].price = 4650; h[18].url = "/images/stories/okna/t2_22.jpg"; h[19] = new Object; h[19].id = 19; h[19].name = "Π”Π²ΠΎΠΉΠ½ΠΎΠ΅(1 створка глухая, 1 створка ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-откидная)"; h[19].price = 5450; h[19].url = "/images/stories/okna/t2_12.jpg"; h[20] = new Object; h[20].id = 20; h[20].name = "Π’Ρ€ΠΎΠΉΠ½ΠΎΠ΅(2 створки Π³Π»ΡƒΡ…ΠΈΠ΅, 1 ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-откидная)"; h[20].price = 5450; h[20].url = "/images/stories/okna/t3_1.jpg"; h[21] = new Object; h[21].id = 21; h[21].name = "Π’Ρ€ΠΎΠΉΠ½ΠΎΠ΅(2 створки ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½Ρ‹Π΅, 1 створка глухая)"; h[21].price = 4650; h[21].url = "/images/stories/okna/t3_2.jpg"; h[22] = new Object; h[22].id = 22; h[22].name = "Π’Ρ€ΠΎΠΉΠ½ΠΎΠ΅(2 створки ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½Ρ‹Π΅, 1 ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-откидная)"; h[22].price = 6350; h[22].url = "/images/stories/okna/t3_3.jpg"; h[23] = new Object; h[23].id = 23; h[23].name = "Π’Ρ€ΠΎΠΉΠ½ΠΎΠ΅(1 створка глухая, 1 створка откидная, 1 створка ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎ-откидная)"; h[23].price = 5850; h[23].url = "/images/stories/okna/t3_31.jpg"; h[24] = new Object; h[24].id = 24; h[24].name = "Балконная Π΄Π²Π΅Ρ€ΡŒ(поворотная)"; h[24].price = 4850; h[24].url = "/images/stories/okna/t5_1.jpg"; } windowData(); function getImg(param, obj) { switch(param){ case '1': document.getElementById(obj).src = h[1].url; document.getElementById("width_hint").innerHTML="(1000-1500)"; document.getElementById("height_hint").innerHTML="(1000-2000)"; break; case '2': document.getElementById(obj).src = h[2].url; document.getElementById("width_hint").innerHTML="(400-1300)"; document.getElementById("height_hint").innerHTML="(400-2000)"; break; case '3': document.getElementById(obj).src = h[3].url; document.getElementById("width_hint").innerHTML="(400-1300)"; document.getElementById("height_hint").innerHTML="(400-2000)"; break; case '4': document.getElementById(obj).src = h[4].url; document.getElementById("width_hint").innerHTML="(1000-2200)"; document.getElementById("height_hint").innerHTML="(600-2000)"; break; case '5': document.getElementById(obj).src = h[5].url; document.getElementById("width_hint").innerHTML="(1000-2200)"; document.getElementById("height_hint").innerHTML="(600-2000)"; break; case '6': document.getElementById(obj).src = h[6].url; document.getElementById("width_hint").innerHTML="(1000-2200)"; document.getElementById("height_hint").innerHTML="(600-2000)"; break; case '7': document.getElementById(obj).src = h[7].url; document.getElementById("width_hint").innerHTML="(1000-2200)"; document.getElementById("height_hint").innerHTML="(600-2000)"; break; case '8': document.getElementById(obj).src = h[8].url; document.getElementById("width_hint").innerHTML="(1200-2800)"; document.getElementById("height_hint").innerHTML="(500-2000)"; break; case '9': document.getElementById(obj).src = h[9].url; document.getElementById("width_hint").innerHTML="(1200-2800)"; document.getElementById("height_hint").innerHTML="(500-2000)"; break; case '10': document.getElementById(obj).src = h[10].url; document.getElementById("width_hint").innerHTML="(1200-2800)"; document.getElementById("height_hint").innerHTML="(500-2000)"; break; case '11': document.getElementById(obj).src = h[11].url; document.getElementById("width_hint").innerHTML="(1200-2800)"; document.getElementById("height_hint").innerHTML="(500-2000)"; break; case '12': document.getElementById(obj).src = h[12].url; document.getElementById("width_hint").innerHTML="(600-1000)"; document.getElementById("height_hint").innerHTML="(1800-2500)"; break; case '13': document.getElementById(obj).src = h[13].url; document.getElementById("width_hint").innerHTML="(1000-1500)"; document.getElementById("height_hint").innerHTML="(1000-2000)"; break; case '14': document.getElementById(obj).src = h[14].url; document.getElementById("width_hint").innerHTML="(400-1300)"; document.getElementById("height_hint").innerHTML="(400-2000)"; break; case '15': document.getElementById(obj).src = h[15].url; document.getElementById("width_hint").innerHTML="(400-1300)"; document.getElementById("height_hint").innerHTML="(400-2000)"; break; case '16': document.getElementById(obj).src = h[16].url; document.getElementById("width_hint").innerHTML="(1000-2200)"; document.getElementById("height_hint").innerHTML="(600-2000)"; break; case '17': document.getElementById(obj).src = h[17].url; document.getElementById("width_hint").innerHTML="(1000-2200)"; document.getElementById("height_hint").innerHTML="(600-2000)"; break; case '18': document.getElementById(obj).src = h[18].url; document.getElementById("width_hint").innerHTML="(1000-2200)"; document.getElementById("height_hint").innerHTML="(600-2000)"; break; case '19': document.getElementById(obj).src = h[19].url; document.getElementById("width_hint").innerHTML="(1000-2200)"; document.getElementById("height_hint").innerHTML="(600-2000)"; break; case '20': document.getElementById(obj).src = h[20].url; document.getElementById("width_hint").innerHTML="(1200-2800)"; document.getElementById("height_hint").innerHTML="(500-2000)"; break; case '21': document.getElementById(obj).src = h[21].url; document.getElementById("width_hint").innerHTML="(1200-2800)"; document.getElementById("height_hint").innerHTML="(500-2000)"; break; case '22': document.getElementById(obj).src = h[22].url; document.getElementById("width_hint").innerHTML="(1200-2800)"; document.getElementById("height_hint").innerHTML="(500-2000)"; break; case '23': document.getElementById(obj).src = h[23].url; document.getElementById("width_hint").innerHTML="(1200-2800)"; document.getElementById("height_hint").innerHTML="(500-2000)"; break; case '24': document.getElementById(obj).src = h[24].url; document.getElementById("width_hint").innerHTML="(600-1000)"; document.getElementById("height_hint").innerHTML="(1800-2500)"; break; } } function izmen(){ chto = document.getElementById("okno").value; if(chto==2){ document.calcForm.type_okno.options.length=0; document.calcForm.type_okno.options[0]=new Option("Π’Ρ‹Π±ΠΎΡ€ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ ΠΎΠΊΠ½Π°", "0", true); document.calcForm.type_okno.options[1]=new Option(h[1].name, h[1].price); document.calcForm.type_okno.options[2]=new Option(h[2].name, h[2].price); document.calcForm.type_okno.options[3]=new Option(h[3].name, h[3].price); document.calcForm.type_okno.options[4]=new Option(h[4].name, h[4].price); document.calcForm.type_okno.options[5]=new Option(h[5].name, h[5].price); document.calcForm.type_okno.options[6]=new Option(h[6].name, h[6].price); document.calcForm.type_okno.options[7]=new Option(h[7].name, h[7].price); document.calcForm.type_okno.options[8]=new Option(h[8].name, h[8].price); document.calcForm.type_okno.options[9]=new Option(h[9].name, h[9].price); document.calcForm.type_okno.options[10]=new Option(h[10].name, h[10].price); document.calcForm.type_okno.options[11]=new Option(h[11].name, h[11].price); document.calcForm.type_okno.options[12]=new Option(h[12].name, h[12].price); } if(chto==3){ document.calcForm.type_okno.options.length=0; document.calcForm.type_okno.options[0]=new Option("Π’Ρ‹Π±ΠΎΡ€ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ ΠΎΠΊΠ½Π°", "0", true); document.calcForm.type_okno.options[1]=new Option(h[13].name, h[13].price); document.calcForm.type_okno.options[2]=new Option(h[14].name, h[14].price); document.calcForm.type_okno.options[3]=new Option(h[15].name, h[15].price); document.calcForm.type_okno.options[4]=new Option(h[16].name, h[16].price); document.calcForm.type_okno.options[5]=new Option(h[17].name, h[17].price); document.calcForm.type_okno.options[6]=new Option(h[18].name, h[18].price); document.calcForm.type_okno.options[7]=new Option(h[19].name, h[19].price); document.calcForm.type_okno.options[8]=new Option(h[20].name, h[20].price); document.calcForm.type_okno.options[9]=new Option(h[21].name, h[21].price); document.calcForm.type_okno.options[10]=new Option(h[22].name, h[22].price); document.calcForm.type_okno.options[11]=new Option(h[23].name, h[23].price); document.calcForm.type_okno.options[12]=new Option(h[24].name, h[24].price); } } </script> <form name="calcForm"> <table border="0" cellspacing="100" align="center" cellpadding="20"> <tr><td> Π’Ρ‹Π±ΠΎΡ€ Ρ‚ΠΈΠΏΠ° ΠΎΠΊΠ½Π°: </td><td> <select name="okno" id="okno" onChange="izmen();"> <option value="1">Π’ΠΈΠΏ ΠΎΠΊΠ½Π°</option> <option value="2">Экстра</option> <option value="3">Π­ΠΊΠΎΠ½ΠΎΠΌ</option> </select> </td></tr><tr><td> Π’Ρ‹Π±ΠΎΡ€ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ ΠΎΠΊΠ½Π°: </td><td> <select id="type_okno"name="type_okno" onchange="getImg(this.value, 'front'); getImgek(this.value, 'front');"> <option value="0">Π’Ρ‹Π±ΠΎΡ€ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ ΠΎΠΊΠ½Π°</option> </select> </td></tr><br><br><tr><td> Π—Π°Π΄Π°ΠΉΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΎΠΊΠ½Π° (ΠΌΠΌ.): </td><td style="text-align: center"> <table border="0" align="center"><tr><td style="vertical-align: middle; text-align: center"> <img id="front" src="/images/stories/okna/closed.jpg" alt="" /> </td><td style="vertical-align: middle; text-align: center"> Высота ΠΎΠΊΠ½Π°<br><span id="height_hint">(1000-2000)</span><br><input type="text" name="height" size="5" class="validate['required','digit']"/> </td></tr><tr><td style="text-align: center"><br> Π¨ΠΈΡ€ΠΈΠ½Π° ΠΎΠΊΠ½Π°<br><span id="width_hint">(1000-1500)</span><br><input type="text" name="width" size="5" class="validate['required','digit'"/> </td></tr></table> </td></tr> </table> <table border="0" cellspacing="20" align="center" cellpadding="0"> <tr><td> <b>ΠžΡ‚ΠΊΠΎΡΡ‹:</b><br> </td></tr><tr><td> Π’ΠΈΠΏ: </td><td> <select name="otkos"> <option value="0">Π‘Π΅Π· откоса</option> <option value="1500">ΠŸΠ»Π°ΡΡ‚ΠΈΠΊΠΎΠ²Ρ‹ΠΉ Π±Π΅Π»Ρ‹ΠΉ</option> <option value="2000">ΠŸΠ»Π°ΡΡ‚ΠΈΠΊΠΎΠ²Ρ‹ΠΉ Π»Π°ΠΌΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ</option> <option value="2500">Бэндвич-панСль</option> <option value="3500">ДСрСвянный</option> </select> </td></tr><tr><td> Π¨ΠΈΡ€ΠΈΠ½Π°: </td><td> <input type="text" name="otkos_width" class="validate['digit[100,500]']"/><br> </td></tr><tr><td> <b>Подоконники:</b><br> </td></tr><tr><td> Π’ΠΈΠΏ: </td><td> <select name="podokonnik"> <option value="0">Π‘Π΅Π· ΠΏΠΎΠ΄ΠΎΠΊΠΎΠ½Π½ΠΈΠΊΠ°</option> <option value="1000">ΠŸΠ»Π°ΡΡ‚ΠΈΠΊΠΎΠ²Ρ‹ΠΉ Π±Π΅Π»Ρ‹ΠΉ</option> <option value="1300">ΠŸΠ»Π°ΡΡ‚ΠΈΠΊΠΎΠ²Ρ‹ΠΉ Π»Π°ΠΌΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ(ΠΏΠΎΠ΄ Π΄Π΅Ρ€Π΅Π²ΠΎ)</option> <option value="4500">ДСрСвянный (сосна)</option> <option value="6750">ДСрСвянный (листвСнница)</option> <option value="9000">ДСрСвянный (Π΄ΡƒΠ±)</option> <option value="12500">ΠšΠ°ΠΌΠ΅Π½Π½Ρ‹ΠΉ</option> </select> </td></tr><tr><td> Π¨ΠΈΡ€ΠΈΠ½Π°:</td><td> <input type="text" name="podokonnik_width" class="validate['digit[150,600]']"/> </td></tr><tr><td> <b>ΠžΡ‚Π»ΠΈΠ²Ρ‹:</b> </td></tr><tr><td> Π’ΠΈΠΏ: </td><td> <select name="otliv"> <option value="0">Π‘Π΅Π· ΠΎΡ‚Π»ΠΈΠ²Π°</option> <option value="50">50 ΠΌΠΌ.</option> <option value="60">60 ΠΌΠΌ.</option> <option value="70">70 ΠΌΠΌ.</option> <option value="80">80 ΠΌΠΌ.</option> <option value="90">90 ΠΌΠΌ.</option> <option value="100">100 ΠΌΠΌ.</option> <option value="110">110 ΠΌΠΌ.</option> <option value="120">120 ΠΌΠΌ.</option> <option value="130">130 ΠΌΠΌ.</option> <option value="140">140 ΠΌΠΌ.</option> <option value="150">150 ΠΌΠΌ.</option> <option value="160">160 ΠΌΠΌ.</option> <option value="170">170 ΠΌΠΌ.</option> <option value="180">180 ΠΌΠΌ.</option> <option value="190">190 ΠΌΠΌ.</option> <option value="200">200 ΠΌΠΌ.</option> </select> </td></tr><tr><td> ΠœΠΎΡΠΊΠΈΡ‚Π½Π°Ρ сСтка: </td><td> <input type="checkbox" name="setka" value="900"> </td></tr><tr><td> ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π·Π°ΠΊΠ°Π· Π½Π° Π²Π°ΡˆΡƒ ΠΏΠΎΡ‡Ρ‚Ρƒ: </td><td> <input type="text" name="mailto"> </td></tr> </table><br> {rez} <br> <div align="center"> <input type="submit" value="Π Π°ΡΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ"> </div> </form>
  • 9
    AAAA MAI EYES !! 11ADIN! 11 !! 1! For the future - in programming there is such a cool thing as cycles -_- - Zowie
  • Oh, tin, immediately reduce the amount of code. - Oleg
  • one
    arrays from one, scary switches, lack of loops, not enough jQuery, in one word, Rewrite! - Specter
  • 2
    For example, a couple of array elements and everything connected with them would suffice. In general, take what does not apply to the problem. - Deonis
  • four
    And you are not lazy ... - Alex Kapustin

2 answers 2

  1. Structure. The whole garden must be replaced by a single entity. You have duplication of information. One window, just in two versions, only the price changes, everything else - the name, the picture, the dimensions - remains unchanged.
  2. Algorithm. There is no need to refill select with window views when changing type. You only change the price, and not everything else.
  3. Usability The use of multiple selects is very annoying to the user, give the user maximum information so that you can immediately see what the options are. This also applies to the types of windows and other elements.
  4. Usability # 2. It would be convenient if you could use the calculator only with the mouse (in surfing the keyboard is rarely used). For numeric parameters, you can add sliders. Moreover, you have everywhere the size is limited to the bottom and top.
  5. Usability # 3. What if a person wants to count 5 windows of one type, 2 windows of another type, and one of the third? Does he have to take the calculator in his hands?

Pieces of code on the issue:

 //Π’Π°ΠΊ объявляСм Π²ΠΈΠ΄Ρ‹ ΠΎΠΊΠΎΠ½. price - массив Ρ†Π΅Π½ 0-Экстра, 1-Π­ΠΊΠΎΠ½ΠΎΠΌ //ВсСго Π² вашСм случаС Π² массивС h Π±ΡƒΠ΄Π΅Ρ‚ 12 ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ var h=[ {"name":"ΠžΠ΄ΠΈΠ½Π°Ρ€Π½ΠΎΠ΅ Π³Π»ΡƒΡ…ΠΎΠ΅","price":[5900,3250],"url":"/images/stories/okna/closed.jpg","width_hint":"(1000-1500)","height_hint":"(1000-2000)"}, {"name":"ΠžΠ΄ΠΈΠ½Π°Ρ€Π½ΠΎΠ΅ ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½ΠΎΠ΅","price":[9000,4650],"url":"/images/stories/okna/t1_1.jpg","width_hint":"(400-1300)","height_hint":"(400-2000)"}]; //Π’Π°ΠΊ заполняСм select Π²ΠΈΠ΄ΠΎΠ² ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы document.calcForm.type_okno.add(new Option("Π’ΠΈΠΏ ΠΎΠΊΠ½Π°", "-1", true)); for (var i=0;i<h.length;i++) { document.calcForm.type_okno.add(new Option(h[i].name, i)); } //ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²Ρ‹Π±ΠΎΡ€Π° Π²ΠΈΠ΄Π° ΠΎΠΊΠΎΠ½ function getImg(obj) { var param = parseInt(document.calcForm.type_okno.value); var img = document.getElementById(obj); if (param>=0) { img.style="display:inline"; img.src = h[param].url; img.alt = h[param].name; document.getElementById("width_hint").innerHTML=h[param].width_hint; document.getElementById("height_hint").innerHTML=h[param].height_hint; } else { //Π’ΡƒΡ‚ ΠΏΠΎ-Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΌΡƒ Π½Π°Π΄ΠΎ Π΄ΠΈΠ·Π΅ΠΉΠ±Π»ΠΈΡ‚ΡŒ элСмСнты ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ зависят ΠΎΡ‚ Π²ΠΈΠ΄Π° ΠΎΠΊΠ½Π° // ΠΈΠ»ΠΈ ΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ: img.style="display:none"; document.getElementById("width_hint").innerHTML=''; document.getElementById("height_hint").innerHTML=''; } //TODO: ЗапускаСм пСрСсчСт стоимости // calc(); } //Π’ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ пСрСсчСта ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ Ρ†Π΅Π½Ρƒ для ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ Π²ΠΈΠ΄Π° ΠΈ Ρ‚ΠΈΠΏΠ° ΠΎΠΊΠ½Π° var param = parseInt(document.calcForm.type_okno.value); //Экстра: var price_extra = h[param].price[0]; //Π­ΠΊΠΎΠ½ΠΎΠΌ: var price_econom = h[param].price[1];
  • Model Answer - Specter
  • Could we talk about this in skype? To be honest, I did not quite understand everything yet. My skype zeus072 - Vladimir Pershin

First, you have not defined the getImgek () function that you are trying to use. secondly, when creating an option for select, type strings

 document.calcForm.type_okno.options[1]=new Option(h[1].name, h[1].price); // ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π½Π° document.calcForm.type_okno.options[1]=new Option(h[1].name, h[1].id);

and you will be happy

PS code for any need to rewrite ... too cumbersome, too confusing.

  • Thus, it has already changed, in this case the element number (id) is substituted into the formula, and not the price. In this function, as I understand it, everything is in order, it works correctly. My function does not work in which the picture and the sign of width and height should change - Vladimir Pershin
  • Well, you already decide that a picture or price is more important to you, with your structure, one excludes the other. and yet if you want the price to change, (which I understand is considered to be on the server), use id in the option and when calculating the price, get its value corresponding to the element id. - FLK
  • Many thanks for such a detailed answer, but I also wanted to ask. Code // So fill the select view when the page is loaded document.calcForm.type_okno.add (new Option ("Window Type", "-1", true)); for (var i = 0; i <h.length; i ++) {document.calcForm.type_okno.add (new Option (h [i] .name, i)); } I add, but it does not appear in the selection. What am I doing wrong? - Vladimir Pershin
  • According to the description it is difficult to understand what the error is. Here is [test] [1], it fills up here normally. [1]: jsfiddle.net/ivanovsuper/K6zAc/1 - Yura Ivanov
  • Understand, the matter is that it is necessary for me, that was 2. In one, the window type (Extra, Economy) is selected, and in the other, the configuration (single, double, etc.) is by Vladimir Pershin