21.12.2012, 10:44
|
|
Новичок на форуме
|
|
Регистрация: 21.12.2012
Сообщений: 7
|
|
|
Три взаимосвязанных select
Помогите решить такую задачу. Есть данные которые изображены в виде Трех таблиц на рисунке:
Какой код вставить, чтобы выводило так:
1) Есть select - со списком из трех параметров облицовки (Пленка, Пластик, Металл)
2) Есть select - со списком ширины (500, 600, 700, и т.д.);
3)Есть select - со списком высоты (500, 600, 700, и т.д.);
При выборе типа Облицовки и размеров из таблицы (или данных) Результат цены выводил тот, который соответствует и облицовки и размерам?
Плюс ко всему, как сделать так чтобы при выборе типа облицовки тут же справа появлялась фото (картинка пленки, картинка, пластика, картинка металл). А ниже уже указываешь (так же списком - select) Ширину и Высоту. И итог показывалась цена в зависимости от: 1) от типа облицовки; 2) от высоты; 3) от ширины.
P.S. Все цены абсолютно не связаны между собой, то есть брать именно нужно из таблицы (или массива) - то есть не методом расчета
пожалуйста, очень нужно, срочно!
Вот здесь рисунок:
Последний раз редактировалось Tigerfox, 21.12.2012 в 12:33.
|
|
21.12.2012, 11:09
|
 |
Профессор
|
|
Регистрация: 03.05.2011
Сообщений: 848
|
|
|
Tigerfox, для начала рисунка нет...из аттача не вставляйте...
|
|
21.12.2012, 12:34
|
|
Новичок на форуме
|
|
Регистрация: 21.12.2012
Сообщений: 7
|
|
Сообщение от lord2kim
|
|
Tigerfox, для начала рисунка нет...из аттача не вставляйте...
|
Добавил рисунок |
|
21.12.2012, 12:55
|
|
жажду знаний
|
|
Регистрация: 17.07.2009
Сообщений: 202
|
|
|
охотно тебе помогу друг, но нифига не понял честно что требуется )))
нужно вручную создать массив исходя из таблицы, а потом выводить текст в цикле???? и как сюда привязать select???
единственная идея со смыслом мне приходит такая: есть три выпадающих списка (select) в первом список материалов, во втором список ширины, в третьем список высоты. Выбираешь все три и появляется конкретный товар с фоткой, описанием и ценой. Хоть что-нибудь я понял правильно???
и что мы имеем изначально? готовый массив? тупо картинку с таблицами, может быть html таблицы с данными или что? из чего исходить?
Последний раз редактировалось bushstas, 21.12.2012 в 13:00.
|
|
21.12.2012, 14:24
|
|
Новичок на форуме
|
|
Регистрация: 21.12.2012
Сообщений: 7
|
|
|
Сообщение от bushstas
|
охотно тебе помогу друг, но нифига не понял честно что требуется )))
нужно вручную создать массив исходя из таблицы, а потом выводить текст в цикле???? и как сюда привязать select???
единственная идея со смыслом мне приходит такая: есть три выпадающих списка (select) в первом список материалов, во втором список ширины, в третьем список высоты. Выбираешь все три и появляется конкретный товар с фоткой, описанием и ценой. Хоть что-нибудь я понял правильно???
и что мы имеем изначально? готовый массив? тупо картинку с таблицами, может быть html таблицы с данными или что? из чего исходить?
|
Совершенно верно! Нужен Скрипт такой -
Есть три выпадающих списка (select):
1) в первом список материалов (Пленка, Пластик, Камень);
2) во втором список высоты (500, 600, 700, 800, 900 и т.д.);
3) в третьем список ширины (500, 600, 700, 800, 900 и т.д.);
4) Итог: цена из массива + фото типа облицовки
При выборе последнего списка (select - ширины) - появляется фото, которое соответствует из списка (select - типа облицовки - допустим, если выбрали Пленку то фото пленки, если Пластик то фото пластика, если камень то фото камня) и Цена, которая должна соответствовать и типу облицовки и высоте и ширине (так как в таблицах), то есть данные из массива (может не из массива) получается.
Последний раз редактировалось Tigerfox, 21.12.2012 в 14:27.
|
|
21.12.2012, 14:34
|
|
Профессор
|
|
Регистрация: 03.05.2011
Сообщений: 848
|
|
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>
|
|
21.12.2012, 17:17
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Самый простой способ, на мой взгляд:
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 код, помогу конкретнее по ходу.
Последний раз редактировалось tsigel, 21.12.2012 в 17:29.
|
|
22.12.2012, 10:41
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Скорее всего проще будет сделать 3 двумерных массива.
|
|
24.12.2012, 14:54
|
|
Новичок на форуме
|
|
Регистрация: 21.12.2012
Сообщений: 7
|
|
|
Сообщение от lord2kim
|
Tigerfox
<table id="pellicle">
<!-- данные для таблиц -->
</table>
<table id="plastic">
<!-- данные для таблиц -->
</table>
<table id="metal">
<!-- данные для таблиц -->
</table>
|
Спасибо большое!
А как правильно орфографически добавить данные для таблиц? |
|
24.12.2012, 14:57
|
|
Профессор
|
|
Регистрация: 03.05.2011
Сообщений: 848
|
|
Tigerfox, не понял вопроса...вы не знаете HTML?
<table>
<tr><th>заголовок первой строки</th><th>второй заголовок первой строки</th></tr>
<tr><td>первая ячейка второй строки</td><td>вторая ячейка второй строки</td></tr>
</table>
|
|
|
|
