Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2016, 18:30
Новичок на форуме
Отправить личное сообщение для ursus102 Посмотреть профиль Найти все сообщения от ursus102
 
Регистрация: 16.01.2016
Сообщений: 1

Проблемы с выпадающим списком JavaScript
Доброго времени суток.

Появилась необходимость сделать простейший калькулятор для сайта, который из двух переменных делает расчет и выводит его на обозрение. Увы, я совершенно не владею JS, html и css. Готовых решений я не нашел.

Набросал схематично вот такую писанину:
Код:
<script type="text/javascript">
  function calc() { 
  var before_boost = document.getElementById("before_boost"); 
  var after_boost = document.getElementById("after_boost"); 
  var calibration = document.getElementById("calibration"); 
 
 //Result
 var result = document.getElementById("result_before_boost"); 
 var result = document.getElementById("result_after_boost");
 var result = document.getElementById("result");
 
 var price_before_boost = 0; 
 var price_after_boost = 0; 
 var price_calibration = 0;

 var price = 0; 
 price_before_boost += parseInt(before_boost.options[before_boost.selectedIndex].value); 
 price_after_boost += parseInt(after_boost.options[after_boost.selectedIndex].value); 
 price_calibration += (calibration.checked == true) ? parseInt(calibration.value) : 0;

 price=price_after_boost - price_before_boost + price_calibration;
  if (price < 0)
price = ('0 ');
 
 result_before_boost.innerHTML = price_before_boost; 
 result_after_boost.innerHTML = price_after_boost;
 result_calibration.innerHTML = price_calibration;
 result.innerHTML = price;
 } 
</script>
 
 <!-- Before boost// -->
  <h3>Расчет</h3>
 <form>
 <div style="float: left; width: 49%;">
 <div class="form-group">
 <label>Первая позиция</label>
 </div>

<td width="100"><select onchange="calc()" id="before_boost">
 <option value="0">Выбрать</option>
 <option value="0" >Значение 1</option>
 <option value="150">Значение 2</option>
 <option value="300">Значение 3</option>
 <option value="400">Значение 4</option>
 <option value="600">Значение 5</option>
 <option value="800">Значение 6</option>
 <option value="1000">Значение 7</option>
 <option value="1200">Значение 8</option>
 <option value="1400">Значение 9</option>
 <option value="1600">Значение 10</option>
 <option value="1800">Значение 11</option>
 <option value="2000">Значение 12</option>
 <option value="3000">Значение 13</option>
 <option value="4000">Значение 14</option>
 <option value="5000">Значение 15</option>
 <option value="6000">Значение 16</option>
 <option value="8000">Значение 17</option>
 <option value="10000">Значение 18</option>
 </select>
</td>
<td width="200"><span id="result_before_boost" style="display:none">0</span></td>
</div>
 
 <!-- After boost// -->
 
 <div class="form-group">
 <label>Вторая позиция</label>
 </div>

<td width="100"><select onchange="calc()" id="after_boost">
 <option value="0">Выбрать</option>
 <option value="0">Значение 1</option>
 <option value="150">Значение 2</option>
 <option value="300">Значение 3</option>
 <option value="400">Значение 4</option>
 <option value="600">Значение 5</option>
 <option value="800">Значение 6</option>
 <option value="1000">Значение 7</option>
 <option value="1200">Значение 8</option>
 <option value="1400">Значение 9</option>
 <option value="1600">Значение 10</option>
 <option value="1800">Значение 11</option>
 <option value="2000">Значение 12</option>
 <option value="3000">Значение 13</option>
 <option value="4000">Значение 14</option>
 <option value="5000">Значение 15</option>
 <option value="6000">Значение 16</option>
 <option value="8000">Значение 17</option>
 <option value="10000">Значение 18</option>
 </select>
</td>
<td width="200"><span id="result_after_boost" style="display:none">0</span></td>

 
 <!-- Addition// -->
 <p></p>
 <div class="form-group">
 <label>Доп позиция</label>
 </div>


<td width="100"><input type="checkbox" onchange="calc()" value="1000" id="calibration" /></td>
<td width="200"><span id="result_calibration">0</span> руб.</td>

 


 
<!-- Итог --> 
<p></p>
 <div class="form-group">
 <label>ИТОГО</label>
 </div>

 <td class="td_result"><span id="result">0</span> руб.</td>
 </form>
Вопрос в следующем:
Как можно сделать так, чтобы при выборе позиции из выпадающего списка снизу или сверху показывалось изображение этой позиции. Значение value у меня используется, поэтому в него поместить ссылку не могу. Прошу помочь мне бестолковому.
У меня два столбца с выпадающим список, к каждому из них необходимо отображение изображения, соответствующее выбранному пункту.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 18:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 19:34
jQuery проблемы с раскрывающимся списком teclis jQuery 3 24.08.2010 11:25
Помогите новичку с выпадающим списком interest Элементы интерфейса 5 19.05.2010 12:15
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 13:37