Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выбор изображения из списка (https://javascript.ru/forum/dom-window/35759-vybor-izobrazheniya-iz-spiska.html)

miles 21.02.2013 11:57

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

Такое часто можно встретить в интернет магазинах, но нужный скрипт я не смогу загуглить.
Заранее благодарен за любую помощь.

рони 21.02.2013 12:06

miles,
напишите html код -- селектор -- элемент в котором будет показана картинка -- желательно массив тестовый самих ссылок на картинки -- сделайте хотябы первые шаги.

miles 21.02.2013 13:53

Цитата:

Сообщение от рони (Сообщение 236037)
miles,
напишите html код -- селектор -- элемент в котором будет показана картинка -- желательно массив тестовый самих ссылок на картинки -- сделайте хотябы первые шаги.

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

ksa 21.02.2013 13:57

Цитата:

Сообщение от miles
из трёх списков, пользователь выбрал первый, второй и первый элемент

Где тестовый пример с теми "списками"?

miles 21.02.2013 14:01

ksa,
http://fortesting.comli.com/calc/option1.html
Там три списка. Выбирая элемент каждого меняется изображение. Или я что-то не так понял?

ksa 21.02.2013 14:21

Цитата:

Сообщение от miles
Или я что-то не так понял?

Посмотри другие темы... Они просто изобилуют тестовыми примерами, которые прямо там же в сообщения можно запустить.

miles 21.02.2013 14:34

Вложений: 1
ksa,
Тоесть тебя не устраивает мой пример, посмотреть который можно нажав на ссылку? И каким-то образом мне нужно встраивать мой пример в сообщение?
Если лень нажать CTRL+U в примере, то вот сохранил в виде файла.

miles 21.02.2013 14:56

Вот код скрипта. Добавил несколько комментариев: http://pastebin.com/BMjzGhj4

ksa 21.02.2013 15:07

Цитата:

Сообщение от miles
посмотреть который можно нажав на ссылку?

Так что его смотреть-то? Его нужно как-то корректировать, дабы показать какой-то вариант решения...

рони 21.02.2013 15:11

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>

ksa 21.02.2013 15:18

Цитата:

Сообщение от miles
И каким-то образом мне нужно встраивать мой пример в сообщение?

Да вот так. :)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
/** Последовательно создаю три массива для хранения изображений из трёх выпадающих списков **/
left = new Array()
for(i=0;i<3;i++) {
	left[i] = new Image()
	if(i==0) left[i].src = "http://fortesting.comli.com/calc/img/calc/1l.gif"
	if(i==1) left[i].src = "http://fortesting.comli.com/calc/img/calc/2l.gif"
}
center = new Array()
for(i=0;i<3;i++) {
	center[i] = new Image()
	if(i==0) center[i].src = "http://fortesting.comli.com/calc/img/calc/1m.gif"
	if(i==1) center[i].src = "http://fortesting.comli.com/calc/img/calc/2m.gif"
}
right = new Array()
for(i=0;i<3;i++) {
	right[i] = new Image()
	if(i==0) right[i].src = "http://fortesting.comli.com/calc/img/calc/1r.gif"
	if(i==1) right[i].src = "http://fortesting.comli.com/calc/img/calc/2r.gif"
}
/** Инициализация смены изображения исходя из выбранного пункта **/
function l_image() {
	document.images[0].src = left[document.left_form.item.selectedIndex].src
}
function c_image() {
	document.images[1].src = center[document.center_form.item.selectedIndex].src
}
function r_image() {
	document.images[2].src = right[document.right_form.item.selectedIndex].src
}
function calc() {
	var o=document.getElementsByName('item');
	var sum=0;
	for (var i=0; i<o.length; i++) {
		sum+=+o[i].value;
	};
	alert(sum);
}
</script>
</head>
<body>
<form method="post" action="calc.php" name=left_form>
	<TABLE COLS=2 WIDTH="40%" >
	    <TR>
	        <th>
				<select name='item' onChange=l_image()>
					<option value='1' selected>Оплеточные рукава</option>
					<option value='2'>Навивочные рукава</option>
				</select>
	        </th>
	        <th>
				<select name='item' onChange=c_image()>
					<option value='10' selected>1 метр</option>
					<option value='20'>2 метра</option>
				</select>
	        </th>
	        <th>
				<select name='item' onChange=r_image()>
					<option value='100' selected>Оплеточные рукава</option>
					<option value='200'>Навивочные рукава</option>
				</select>
	        </th>
	    </tr>
	    <tr>
	        <th>
	            <IMG SRC="http://fortesting.comli.com/calc/img/calc/1l.gif" NAME="tool">
	        </th>
	        <th>
	            <IMG SRC="http://fortesting.comli.com/calc/img/calc/1m.gif" NAME="tool">
	        </th>
	        <th>
	            <IMG SRC="http://fortesting.comli.com/calc/img/calc/1l.gif" NAME="tool">
	        </th>
	    </TR>
	</TABLE>
	<input type="button" value="Подсчитать стоимость" onclick='calc();'>
</form>
</body>
</html>


Часовой пояс GMT +3, время: 04:10.