Javascript-форум - Три взаимосвязанных select

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Три взаимосвязанных select (https://javascript.ru/forum/misc/34128-tri-vzaimosvyazannykh-select.html)

Три взаимосвязанных select

Помогите решить такую задачу. Есть данные которые изображены в виде Трех таблиц на рисунке:

Какой код вставить, чтобы выводило так:
1) Есть select - со списком из трех параметров облицовки (Пленка, Пластик, Металл)
2) Есть select - со списком ширины (500, 600, 700, и т.д.);
3)Есть select - со списком высоты (500, 600, 700, и т.д.);
При выборе типа Облицовки и размеров из таблицы (или данных) Результат цены выводил тот, который соответствует и облицовки и размерам?
Плюс ко всему, как сделать так чтобы при выборе типа облицовки тут же справа появлялась фото (картинка пленки, картинка, пластика, картинка металл). А ниже уже указываешь (так же списком - select) Ширину и Высоту. И итог показывалась цена в зависимости от: 1) от типа облицовки; 2) от высоты; 3) от ширины.

P.S. Все цены абсолютно не связаны между собой, то есть брать именно нужно из таблицы (или массива) - то есть не методом расчета
пожалуйста, очень нужно, срочно!

Вот здесь рисунок:

Tigerfox, для начала рисунка нет...из аттача не вставляйте...

Цитата:

Сообщение от lord2kim (Сообщение 222711)

Tigerfox, для начала рисунка нет...из аттача не вставляйте...

Добавил рисунок

охотно тебе помогу друг, но нифига не понял честно что требуется )))

нужно вручную создать массив исходя из таблицы, а потом выводить текст в цикле???? и как сюда привязать select???

единственная идея со смыслом мне приходит такая: есть три выпадающих списка (select) в первом список материалов, во втором список ширины, в третьем список высоты. Выбираешь все три и появляется конкретный товар с фоткой, описанием и ценой. Хоть что-нибудь я понял правильно???

и что мы имеем изначально? готовый массив? тупо картинку с таблицами, может быть html таблицы с данными или что? из чего исходить?

Цитата:

Сообщение от bushstas (Сообщение 222742)

Совершенно верно! Нужен Скрипт такой -
Есть три выпадающих списка (select):
1) в первом список материалов (Пленка, Пластик, Камень);
2) во втором список высоты (500, 600, 700, 800, 900 и т.д.);
3) в третьем список ширины (500, 600, 700, 800, 900 и т.д.);
4) Итог: цена из массива + фото типа облицовки

При выборе последнего списка (select - ширины) - появляется фото, которое соответствует из списка (select - типа облицовки - допустим, если выбрали Пленку то фото пленки, если Пластик то фото пластика, если камень то фото камня) и Цена, которая должна соответствовать и типу облицовки и высоте и ширине (так как в таблицах), то есть данные из массива (может не из массива) получается.

Tigerfox, как то так если из соответствующих таблиц

<html>
<head>
<title></title>
<script>
var d = document;

function result() {
	if (d.getElementById("lining").value == 0 || d.getElementById("width").value == 0 || d.getElementById("height").value == 0) {  }
	else {
		var table = d.getElementById(d.getElementById("lining").value), res;
		res = table.getElementsByTagName("tr")[d.getElementById("width").value].getElementsByTagName("td")[d.getElementById("height").value].innerHTML;
		d.getElementsById("result").innerHTML = res;
	}
}

window.onload = function () {
	d.getElementById("lining").onchange = function () { d.getElementById("img").src = (this.value == 0 ? "" : this.value+".jpg"); result(); };
	d.getElementById("width").onchange = d.getElementById("height").onchange = function () { result(); };
}
</script>
</head>
<body>
<table id="pellicle">
	<!-- данные для таблиц -->
</table>
<table id="plastic">
	<!-- данные для таблиц -->
</table>
<table id="metal">
	<!-- данные для таблиц -->
</table>
<select id="lining">
	<option value="0"></option>
	<option value="pellicle">Пленка</option>
	<option value="plastic">Пластик</option>
	<option value="metal">Металл</option>
</select>
<select id="width">
	<option value="0"></option>
	<option value="1">500мм</option>
	<option value="2">600мм</option>
	<option value="3">700мм</option>
	<option value="4">800мм</option>
	<option value="5">900мм</option>
</select>
<select id="height">
	<option value="0"></option>
	<option value="1">500мм</option>
	<option value="2">600мм</option>
	<option value="3">700мм</option>
	<option value="4">800мм</option>
	<option value="5">900мм</option>
</select>
Цена: <span id="result"></span><br>
<img src="" id="img">
</body>
</html>

Самый простой способ, на мой взгляд:
1. Необходимо создать 3-х мерный массив, в котором 1 - материал, второе - ширина, 3 - высота.
Заполнить массив Табличными данными (если таблица есть на сайте - можешь забрать данные из неё, это делается с помощью вложенных циклов (в 3-х мерном массиве понадобится 3 цикла). Или заполнить данные руками. Например:

var dannie = [//массив содержит цены
[[[15], [17],[...],[35]],/*<--ширина*/[[16],[19],[...] /*<--высота*/]],//Способ бредовый, надеюсь инфа есть на сайте
[[/*ширина*/],[/*высота*/]], //пластик
[[/*ширина*/],[/*высота*/]]//металл
]

2. У нас есть массив с данными, есть 3 option. Вызов события поиска цены и картинки можно сделать на кнопку или blur (onblur без jQuery), при условии что в других option что-то выбрано (с помощью jQuery это можно проверить с помощью .attr()).

Картинку показать совсем просто, забрать value и по значению добавлять картинку (варианта всего 3, не замучиешься).

Выбор данных из массива так-же делаешь с помощью value, если ты правильно заполнишь массив, то твоё value option -a и будет ключём к данным массива.

Пример (с помощью jQuery):

var tmp1 
$('#lining option').each(function() {
   if ($(this).attr('selected')) {tmp1 = $(this).val()}
})
dannie[tmp1][tmp2][tmp3]

Задача довольно объёмная, в последнем пункте я не уверен, если он не сработает можешь добавлять selected при клике. Делай, выкладывай js код, помогу конкретнее по ходу.

Скорее всего проще будет сделать 3 двумерных массива.

Цитата:

Сообщение от lord2kim (Сообщение 222764)

Tigerfox
<table id="pellicle">

</table>
<table id="plastic">

</table>
<table id="metal">

</table>

Спасибо большое!
А как правильно орфографически добавить данные для таблиц?

Tigerfox, не понял вопроса...вы не знаете HTML?

<table>
    <tr><th>заголовок первой строки</th><th>второй заголовок первой строки</th></tr>
    <tr><td>первая ячейка второй строки</td><td>вторая ячейка второй строки</td></tr>
</table>