Javascript.RU

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

Переменная и 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>
Ответить с цитированием
  #2 (permalink)  
Старый 15.01.2015, 19:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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
Ответить с цитированием
  #3 (permalink)  
Старый 17.01.2015, 19:15
Аватар для Navilsor
Интересующийся
Отправить личное сообщение для Navilsor Посмотреть профиль Найти все сообщения от Navilsor
 
Регистрация: 15.01.2015
Сообщений: 16

Собрал, не работает
<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>
Ответить с цитированием
  #4 (permalink)  
Старый 17.01.2015, 19:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Navilsor,
9 строка лишняя и если вы в 7 строке сделали другое название параметра то и в строке 11 и 13 тоже самое должно быть
Ответить с цитированием
  #5 (permalink)  
Старый 17.01.2015, 19:50
Аватар для Navilsor
Интересующийся
Отправить личное сообщение для Navilsor Посмотреть профиль Найти все сообщения от Navilsor
 
Регистрация: 15.01.2015
Сообщений: 16

рони,
Тогда берётся только одно последнее значение 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>
Ответить с цитированием
  #6 (permalink)  
Старый 17.01.2015, 19:54
Аватар для Navilsor
Интересующийся
Отправить личное сообщение для Navilsor Посмотреть профиль Найти все сообщения от Navilsor
 
Регистрация: 15.01.2015
Сообщений: 16

Переменную прописал правильно, но картинки не отображаются
var base = { 1 : {src : "images\1.jpg", price : 5900}, 2 : {src : "images\2.jpg", price : 6900}}
Ответить с цитированием
  #7 (permalink)  
Старый 17.01.2015, 20:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #8 (permalink)  
Старый 17.01.2015, 21:16
Аспирант
Посмотреть профиль Найти все сообщения от registrant
 
Регистрация: 15.01.2015
Сообщений: 39

<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>
Ответить с цитированием
  #9 (permalink)  
Старый 17.01.2015, 23:11
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

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

еще вариантик
Ответить с цитированием
  #10 (permalink)  
Старый 22.01.2015, 08:01
Аватар для Navilsor
Интересующийся
Отправить личное сообщение для Navilsor Посмотреть профиль Найти все сообщения от Navilsor
 
Регистрация: 15.01.2015
Сообщений: 16

И еще вопрос, можно ли потом вызвать переменную 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 почему-то...
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Select, optionl, и автоматический выбор Rorbi Элементы интерфейса 2 29.05.2014 15:38
SQL запрос. Как делать SELECT с условием SELECT Duda.Ml1986@gmail.com Серверные языки и технологии 16 13.01.2014 16:09
Метод для конвертирования едениц px, em, %, pt. jegit Элементы интерфейса 0 07.03.2013 16:15
Как сохранить предыдущее значение select? MaxD Общие вопросы Javascript 3 21.07.2011 12:36
Проблема с динамическим формированием select elepsion jQuery 1 31.10.2010 14:31