Доброго времени суток.
Появилась необходимость сделать простейший калькулятор для сайта, который из двух переменных делает расчет и выводит его на обозрение. Увы, я совершенно не владею 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 у меня используется, поэтому в него поместить ссылку не могу. Прошу помочь мне бестолковому.
У меня два столбца с выпадающим список, к каждому из них необходимо отображение изображения, соответствующее выбранному пункту.