Javascript.RU

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

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

Такое часто можно встретить в интернет магазинах, но нужный скрипт я не смогу загуглить.
Заранее благодарен за любую помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 21.02.2013, 12:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

miles,
напишите html код -- селектор -- элемент в котором будет показана картинка -- желательно массив тестовый самих ссылок на картинки -- сделайте хотябы первые шаги.
Ответить с цитированием
  #3 (permalink)  
Старый 21.02.2013, 13:53
Новичок на форуме
Отправить личное сообщение для miles Посмотреть профиль Найти все сообщения от miles
 
Регистрация: 01.02.2013
Сообщений: 7

Сообщение от рони Посмотреть сообщение
miles,
напишите html код -- селектор -- элемент в котором будет показана картинка -- желательно массив тестовый самих ссылок на картинки -- сделайте хотябы первые шаги.
Рони, спасибо за ответ и совет. Я так и сделал.
Вот результат того, что я смог сделать сам: http://fortesting.comli.com/calc/option1.html
Но возникли другие сложности.
  1. Нужно исходя из выбранных элементов подсчитать стоимость данного продукта. Например из трёх списков, пользователь выбрал первый, второй и первый элемент. допустим 1-ый элемент стоит 1$, а второй 2$. Тоесть сумма трёх выбранных элементов будет 1$+2$+1$ = 4$. Пользователю нужно вывести данную сумму. Задача простая, но я не знаю как осуществить её на java script. Пока добрался только до текущего момента.
  2. Я не могу создать правильно второй и третий массивы, которые бы позволили выбирать другое изображение во второй колонке и третьей, где выбирается размер и правая сторона элемента.

Последний раз редактировалось miles, 21.02.2013 в 13:56.
Ответить с цитированием
  #4 (permalink)  
Старый 21.02.2013, 13:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от miles
из трёх списков, пользователь выбрал первый, второй и первый элемент
Где тестовый пример с теми "списками"?
Ответить с цитированием
  #5 (permalink)  
Старый 21.02.2013, 14:01
Новичок на форуме
Отправить личное сообщение для miles Посмотреть профиль Найти все сообщения от miles
 
Регистрация: 01.02.2013
Сообщений: 7

ksa,
http://fortesting.comli.com/calc/option1.html
Там три списка. Выбирая элемент каждого меняется изображение. Или я что-то не так понял?
Ответить с цитированием
  #6 (permalink)  
Старый 21.02.2013, 14:21
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от miles
Или я что-то не так понял?
Посмотри другие темы... Они просто изобилуют тестовыми примерами, которые прямо там же в сообщения можно запустить.
Ответить с цитированием
  #7 (permalink)  
Старый 21.02.2013, 14:34
Новичок на форуме
Отправить личное сообщение для miles Посмотреть профиль Найти все сообщения от miles
 
Регистрация: 01.02.2013
Сообщений: 7

ksa,
Тоесть тебя не устраивает мой пример, посмотреть который можно нажав на ссылку? И каким-то образом мне нужно встраивать мой пример в сообщение?
Если лень нажать CTRL+U в примере, то вот сохранил в виде файла.
Вложения:
Тип файла: zip calc.zip (22.9 Кб, 8 просмотров)
Ответить с цитированием
  #8 (permalink)  
Старый 21.02.2013, 14:56
Новичок на форуме
Отправить личное сообщение для miles Посмотреть профиль Найти все сообщения от miles
 
Регистрация: 01.02.2013
Сообщений: 7

Вот код скрипта. Добавил несколько комментариев: http://pastebin.com/BMjzGhj4
Ответить с цитированием
  #9 (permalink)  
Старый 21.02.2013, 15:07
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от miles
посмотреть который можно нажав на ссылку?
Так что его смотреть-то? Его нужно как-то корректировать, дабы показать какой-то вариант решения...
Ответить с цитированием
  #10 (permalink)  
Старый 21.02.2013, 15:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

miles, код лучше располагать здесь, так вам быстрее ответят.не особо понятно где три массива
Вариант ... (очередной дубликат зависимых селектов, которых множество на форуме)
<!DOCTYPE html>
<html>
<head>
  <title>Пример работы калькулятора</title>
  <meta charset="UTF-8">
</head>

<body>
  <table cols="2" width="40%">
    <tr>
      <th><select name="item">
        </select></th>

      <th><select name="item">
        </select></th>
    </tr>

    <tr>
      <th><img name="tool"></th>
      <th id="total">1$</th>
    </tr>
  </table>

  <form>

    <script  type="text/javascript">

    var base = [
    {   src : "http://javascript.ru/forum/images/smilies/thank_you2.gif",
        height : [1, 2, 3, 4],
        price : [1, 1, 1, 1],
        text : "Оплеточные рукава"
    },
    {   src : "http://javascript.ru/forum/images/smilies/dance3.gif",
        height : [1, 2, 3, 4, 5],
        price : [2, 2, 2, 2, 1],//за 5 метров скидка
        text : "Навивочные рукава"
    }
    ]


    var select = document.getElementsByTagName('select')[0];
    for (var k=0; k< base.length; k++)  {
           select.options[k] = new Option(base[k]['text'], k);
        }
    function init() {
        var i = this.selectedIndex || 0
        var img =  document.getElementsByTagName('img')[0]
        var src =  base[i]['src'];
        img.src = src;
        var select = document.getElementsByTagName('select')[1];
        select.options.length=0
        var height = base[i]['height'];
        var price = base[i]['price'];
        for (var k=0; k< height.length; k++)  {
           select.options[k] = new Option(height[k]+"м", height[k]*price[k]);
        }
        var total =  document.getElementById('total');
        total.innerHTML = height[0]*price[0]+"$"
    }
    select.addEventListener('change', init);
    init();
    select = document.getElementsByTagName('select')[1];
    function count()
    {
       var i = this.selectedIndex || 0;
       var value = this.options[i].value ;
       var total =  document.getElementById('total');
       total.innerHTML = value+"$"
    }
    select.addEventListener('change', count);
    </script>
  </form>
</body>
</html>

Последний раз редактировалось рони, 21.02.2013 в 15:14.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выбор из списка regina68 Элементы интерфейса 9 03.03.2012 12:37
Определить выбор изображения tarya jQuery 0 02.08.2011 01:11
Выбор элемента из выпадающего списка Naik jQuery 0 21.07.2011 13:49
Изменения изображения при выборе из списка hayk Общие вопросы Javascript 10 30.11.2010 10:42
Выбор элементов и построение списка выбранных элементов. madgals Events/DOM/Window 6 14.04.2009 22:30