Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Три взаимосвязанных select


Автор: Tigerfox 21.12.2012, 09:20
Помогите решить такую задачу. Есть данные которые изображены в виде Трех таблиц на рисунке: 
http://s2.ipicture.ru/Gallery/Viewfull/20172567.html
Какой код вставить, чтобы выводило взаимосвязь так:
1) Есть select - со списком из трех параметров облицовки (Пленка, Пластик, Металл)
2) Есть select - со списком ширины (500, 600, 700, и т.д.);
3)Есть select - со списком высоты (500, 600, 700, и т.д.);
При выборе типа Облицовки и размеров из таблицы (или данных) Результат цены выводил тот, который соответствует и облицовки и размерам?
Плюс ко всему, как сделать так чтобы при выборе типа облицовки тут же справа появлялась фото (картинка пленки, картинка, пластика, картинка металл). А ниже уже указываешь (так же списком - select) Ширину и Высоту. И итог показывалась цена в зависимости от: 1) от типа облицовки; 2) от высоты; 3) от ширины.

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

Автор: Aliance 24.12.2012, 11:19
1) Картинка не отображается. Перезалей или прикрепи к посту.
2) Здесь помогают решить проблему, а не решают ее за тебя. Показывай, что ты уже сделал с указанием того, чего не получилось.
Если ты хочешь, чтобы тебе просто написали требуемое - тебе в раздел Работа.

Автор: Tigerfox 25.12.2012, 14:33
Имеется такой код, вместе с таблицами, как сделать чтобы таблицы были не видимы на html-странице и как прописать конкретный путь к картинкам в виде http://site.ru/images/calc/*.png :

Код

<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" CELLSPACING="1" CELLPADDING="3" ALIGN="CENTER" BORDER="0" BGCOLOR="#ffffff">
<TR>
<TD BGCOLOR="#00FFFF">ПЛЕНККА (Ширина / Высота)</TD>
<TD BGCOLOR="#00FF00">500</TD>
<TD BGCOLOR="#00FF00">600</TD>
<TD BGCOLOR="#00FF00">700</TD>
<TD BGCOLOR="#00FF00">800</TD>
<TD BGCOLOR="#00FF00">900</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">500</TD>
<TD>17400</TD>
<TD>17700</TD>
<TD>20100</TD>
<TD>20500</TD>
<TD>20800</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">600</TD>
<TD>17900</TD>
<TD>18300</TD>
<TD>20600</TD>
<TD>21000</TD>
<TD>21300</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">700</TD>
<TD>20400</TD>
<TD>20800</TD>
<TD>21100</TD>
<TD>21500</TD>
<TD>21900</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">800</TD>
<TD>20900</TD>
<TD>21300</TD>
<TD>21600</TD>
<TD>22000</TD>
<TD>22400</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">900</TD>
<TD>21400</TD>
<TD>21800</TD>
<TD>22200</TD>
<TD>22500</TD>
<TD>22900</TD>
</TR>
</table>

<TABLE id="plastic" CELLSPACING="1" CELLPADDING="3" ALIGN="CENTER" BORDER="0" BGCOLOR="#ffffff">
<TR>
<TD BGCOLOR="#00FFFF">ПЛАСТИК (Ширина / Высота)</TD>
<TD BGCOLOR="#00FF00">500</TD>
<TD BGCOLOR="#00FF00">600</TD>
<TD BGCOLOR="#00FF00">700</TD>
<TD BGCOLOR="#00FF00">800</TD>
<TD BGCOLOR="#00FF00">900</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">500</TD>
<TD>18200</TD>
<TD>18600</TD>
<TD>21900</TD>
<TD>22300</TD>
<TD>22700</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">600</TD>
<TD>18800</TD>
<TD>19200</TD>
<TD>22600</TD>
<TD>22900</TD>
<TD>23300</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">700</TD>
<TD>22500</TD>
<TD>22900</TD>
<TD>23200</TD>
<TD>23600</TD>
<TD>24000</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">800</TD>
<TD>23100</TD>
<TD>23500</TD>
<TD>23900</TD>
<TD>24300</TD>
<TD>24600</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">900</TD>
<TD>23800</TD>
<TD>24200</TD>
<TD>24500</TD>
<TD>24900</TD>
<TD>25300</TD>
</TR>
</table>
           
<TABLE id="metal" CELLSPACING="1" CELLPADDING="3" ALIGN="CENTER" BORDER="0" BGCOLOR="#ffffff">
<TR>
<TD BGCOLOR="#00FFFF">МЕТАЛЛ (Ширина / Высота)</TD>
<TD BGCOLOR="#00FF00">500</TD>
<TD BGCOLOR="#00FF00">600</TD>
<TD BGCOLOR="#00FF00">700</TD>
<TD BGCOLOR="#00FF00">800</TD>
<TD BGCOLOR="#00FF00">900</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">500</TD>
<TD>20200</TD>
<TD>20600</TD>
<TD>24000</TD>
<TD>24300</TD>
<TD>24700</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">600</TD>
<TD>21000</TD>
<TD>21400</TD>
<TD>24800</TD>
<TD>25100</TD>
<TD>25500</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">700</TD>
<TD>24800</TD>
<TD>25200</TD>
<TD>25500</TD>
<TD>25900</TD>
<TD>26300</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">800</TD>
<TD>25600</TD>
<TD>26000</TD>
<TD>26300</TD>
<TD>26700</TD>
<TD>27100</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">900</TD>
<TD>26400</TD>
<TD>26700</TD>
<TD>27100</TD>
<TD>27500</TD>
<TD>27900</TD>
</TR>
</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>

Автор: Aliance 25.12.2012, 18:07
Цитата(Tigerfox @  25.12.2012,  15:33 Найти цитируемый пост)
как сделать чтобы таблицы были не видимы на html-странице 

Прописать им в css свойство
Код

#pellicle, #plastic, #metal { display: none }​


Цитата(Tigerfox @  25.12.2012,  15:33 Найти цитируемый пост)
как прописать конкретный путь к картинкам в виде http://site.ru/images/calc/*.png

путь к картинкам прописывается в данном коде здесь:
Код

d.getElementById("img").src = (this.value == 0 ? "" : this.value+".jpg"); result();

соответственно меняем это дело на такое:
Код

d.getElementById("img").src = (this.value == 0 ? "" : 'http://site.ru/images/calc/' + this.value + '.png');


Но вообще так никто не делает, данные для расчета лучше хранить в массиве, а не в html таблице.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)