javascript - Привязать картинку к селекту


0

Создаю калькулятор услуг на сайте. Возникла проблема с привязкой картинки к селекту. Хочу, чтобы при конкретном выбранном пункте отображалась определённая картинка. Подскажите, пожалуйста, как это сделать? Ниже привожу код:

<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>
А вы не ленивый... — 10 янв 20122012-01-10 19:56:22.000000
Для примера хватило бы и пару элементов массива и всего, что с ними связанно. У брать вообще то, что никаким боком к проблеме не относится. — 10 янв 20122012-01-10 17:56:33.000000
массивы с единицы, страшные свитчи, отсутствие циклов, недостаточно jQuery, одним словом ПЕРЕПИСАТЬ! 10 янв 20122012-01-10 17:45:02.000000
Ох жесть, немедленно сократите количество кода. — 10 янв 20122012-01-10 17:35:44.000000
АААА МАИ ГЛАЗА!!11АДИН!11!!1! На будущее - в программировании есть такая крутая штука как циклы -_- — 10 янв 20122012-01-10 17:34:52.000000

2 ответа

4
  1. Структура. Весь огород необходимо заменить на единые сущности. У вас идет дублирование информации. Окно одно, просто в двух вариантах исполнения, меняется только цена, все остальное - название, картинка, размеры - остается неизменным.
  2. Алгоритм. Нет необходимости перезаполнять select с видами окон при изменении типа. У вас от этого меняется цена только, а не все остальное.
  3. Юзабилити. Использование многочисленных selectов очень раздражает пользователя, дайте пользователю максимум информации, чтоб сразу было видно какие варианты бывают. Это касается и видов окон и прочих элементов.
  4. Юзабилити #2. Было бы удобно если бы пользоваться калькулятором можно было только мышью (в серфинге клавиатурой пользуются редко). Для числовых параметров можно добавить слайдеры. Тем более, что у вас везде размеры ограничены снизу и сверху.
  5. Юзабилити #3. Что если человек захочет посчитать 5 окон одного вида, 2 окна другого вида, и одно третьего? Ему калькулятор в руки брать придется?

Куски кода по вопросу:

//Так объявляем виды окон. 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];
Мы могли бы поговорить об этом в скайпе? Если честно, ещё не совсем до конца всё понял. Мой скайп zeus072 — 11 янв 20122012-01-11 20:58:11.000000
образцовый ответ — 11 янв 20122012-01-11 05:09:53.000000
1

во первых у вас не определена функция getImgek(), которую вы пытаетесь использовать. во вторых при создании option для select строки типа

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);

и будет вам счастье

P.S. код по любому надо переписать... слишком громоздко, слишком запутано.

  • 10 янв 2012 2012-01-10 19:47:13
Понимаете, дело в том, что мне надо, чтобы было 2 селекта. В одном выбирается тип окна (Экстра, Эконом), а в другом уже конфигурация (одинарное, двойное и т.д.) — 11 янв 20122012-01-11 14:10:03.000000
По описанию сложно понять в чем ошибка. Вот [тест][1], здесь заполняется нормально. [1]:jsfiddle.net/ivanovsuper/K6zAc/1 11 янв 20122012-01-11 13:28:16.000000
Большое спасибо за такой развёрнутый ответ, но хотел ещё спросить. Код //Так заполняем 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)); } Добавляю, но в селекте пунктов не появляется. Что я неправильно делаю? — 11 янв 20122012-01-11 12:14:59.000000
ну вы уж определитесь, что вам важней картинка или цена, при вашей структуре одно исключает другое. и всё таки если вы хотите чтобы и цена менялась, (которая я так понимаю считается на сервере), используйте в option именно id а при расчете цены уже получайте её значение соответствующее id элемента. — 10 янв 20122012-01-10 21:39:30.000000
Таким образом уже менял, в этом случае в формулу подставляется номер элемента (id), а не цена. В этой функции как я понимаю, всё в порядке, она работает корректно. У меня не работает функция, в которой должна меняться картинка и знапчение ширины и высоты — 10 янв 20122012-01-10 20:35:47.000000