Переменная и select
Добрый день! При выборе select у меня меняется картинка. Так как select может передавать только одну переменную value в скрипт, мне нужно сделать зависимость. То есть выбрали select'ом картинку, скрипт перевел выбранную картинку в переменную и вывел на страницу цифру соответствующую конкретной картинке. Подскажите пожалуйста как реализовать?
P.S. Например: переменная картинка 1 = переменная =5900
<script language="JavaScript">
<!--
function changeImage(form) {
selection = form.imagename.options[form.imagename.selectedIndex].value; document.images['pic'].src = selection;
var price = 5900
document.getElementById('mydiv').innerHTML = price;
}
//-->
</script>
<form>
<img name="pic" src="images\1.jpg" alt=""></br>
<select size=1 name="imagename" onChange="changeImage(this.form)" id="price">
<option value="images\1.jpg">Картинка 1</option>
<option value="images\2.jpg">Картинка 2</option>
<option value="images\3.jpg">Картинка 3</option>
</select>
<div id="mydiv">0</div>
</form>
|
Navilsor, собери пазл
var base = { 0 : {src : "images\1.jpg", price : 5900}} <option value="0">Картинка 1</option> onChange="changeImage(this.value)" document.images['pic'].src = base[form].src document.getElementById('mydiv').innerHTML = base[form].price |
Собрал, не работает :(
<script language="JavaScript">
<!--
var base = { 1 : {src : "images\1.jpg", price : 5900}}
var base = { 2 : {src : "images\2.jpg", price : 6900}}
var base = { 3 : {src : "images\3.jpg", price : 7900}}
function changeImage(value) {
selection = form.imagename.options[form.imagename.selectedIndex].value;
document.images['pic'].src = base[form].src
document.getElementById('mydiv').innerHTML = base[form].price
}
//-->
</script>
<form>
<img name="pic" src="images\1.jpg" alt=""></br>
<select size=1 name="imagename" onChange="changeImage(this.value)" id="price">
<option value="1">Картинка 1</option>
<option value="2">Картинка 2</option>
<option value="3">Картинка 3</option>
</select>
<div id="mydiv">0</div>
</form>
|
Navilsor,
9 строка лишняя и если вы в 7 строке сделали другое название параметра то и в строке 11 и 13 тоже самое должно быть |
рони,
Тогда берётся только одно последнее значение base.
<script language="JavaScript">
<!--
var base = { 1 : {src : "images\1.jpg", price : 5900}}
var base = { 2 : {src : "images\2.jpg", price : 6900}}
var base = { 3 : {src : "images\3.jpg", price : 7900}}
function changeImage(form) {
document.images['pic'].src = base[form].src
document.getElementById('mydiv').innerHTML = base[form].price
}
//-->
</script>
<form>
<img name="pic" src="images\1.jpg" alt=""></br>
<select size=1 name="imagename" onChange="changeImage(this.value)" id="price">
<option value="0">Выбрать</option>
<option value="1">Картинка 1</option>
<option value="2">Картинка 2</option>
<option value="3">Картинка 3</option>
</select>
<div id="mydiv">0</div>
</form>
|
Переменную прописал правильно, но картинки не отображаются
var base = { 1 : {src : "images\1.jpg", price : 5900}, 2 : {src : "images\2.jpg", price : 6900}}
|
Navilsor,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
var base = {
1: {
src: "http://javascript.ru/forum/images/smilies/victory.gif",
price: 5900
},
2: {
src: "http://javascript.ru/forum/images/smilies/dance3.gif",
price: 6900
},
3: {
src: "http://javascript.ru/forum/images/smilies/cray.gif",
price: 7900
}
};
function changeImage(form) {
document.images["pic"].src = base[form.value].src;
document.getElementById("mydiv").innerHTML = base[form.value].price;
form.value = 0
};
</script>
</head>
<body>
<form>
<img name="pic" src="http://javascript.ru/forum/images/smilies/victory.gif" alt=""></br>
<select size=1 name="imagename" onChange="changeImage(this)" id="price">
<option value="0">Выбрать</option>
<option value="1">Картинка 1</option>
<option value="2">Картинка 2</option>
<option value="3">Картинка 3</option>
</select>
<div id="mydiv">5900</div>
</form>
</body>
</html>
|
<html>
<head>
</head>
<body>
<form>
<img name="pic" src="http://icons.iconarchive.com/icons/guillendesign/variations-3/256/Default-Icon-icon.png" /></br>
<select onChange="changeImage(this.value)">
<option value="http://icons.iconarchive.com/icons/guillendesign/variations-3/256/Default-Icon-icon.png 0">Выбрать</option>
<option value="http://javascript.ru/forum/image.php?u=39914&dateline=1421334989 5900">Картинка 1</option>
<option value="http://javascript.ru/forum/image.php?u=7416&dateline=1372796129 6900">Картинка 2</option>
<option value="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif 7900">Картинка 3</option>
</select>
<div id="mydiv">0</div>
</form>
<script>
d=document.getElementById('mydiv')
function changeImage(value) {
document.images['pic'].src=value.split(" ")[0]
d.innerHTML = value.split(" ")[1]
}
</script>
</body>
</html>
|
<img id="pic" src="http://icons.iconarchive.com/icons/guillendesign/variations-3/256/Default-Icon-icon.png"
/>
<br>
<select id="changeImage">
<option value="0" data-img="http://icons.iconarchive.com/icons/guillendesign/variations-3/256/Default-Icon-icon.png">Выбрать</option>
<option value="5900" data-img="http://javascript.ru/forum/image.php?u=39914&dateline=1421334989">Картинка 1</option>
<option value="6900" data-img="http://javascript.ru/forum/image.php?u=7416&dateline=1372796129">Картинка 2</option>
<option value="7900" data-img="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">Картинка 3</option>
</select>
<div id="mydiv">0</div>
<script>
window.onload = function () {
changeImage.onchange = function () {
this.selected = this.options[this.selectedIndex];
pic.src = this.selected.getAttribute('data-img');
mydiv.innerHTML = this.selected.value;
};
};
</script>
еще вариантик :) |
И еще вопрос, можно ли потом вызвать переменную mydiv и перемножить её с другой переменной?
function calc() {
var type = document.getElementById("type");
var mydiv = document.getElementById("mydiv");
myprice += parseInt(type.value*mydiv.value);
pricex = myprice;
result.innerHTML = pricex;
Вылетает NaN почему-то... |
| Часовой пояс GMT +3, время: 13:17. |