Двойной динамический список.
Доброго дня, друзья!
Ситуация такая: Есть три списка: - Материал (ткань, бриз, алюминий, пластик) - независимый, - Выборка (весь список, хиты продаж, эконом, премиум) - независимый, - Фактура (большой список моделей) - зависит от материала и выборки. Принцип действия таков, выбираем материал, в соответствии с материалом выпадет нужный список моделей фактуры, но поскольку список большой мне необходимо сделать еще выборку по выпадающему списку (хиты, эконом и т.д.). Изначально предполагал, что в value сделаю три значения: vp1 - переменная стоимости, econ - эконом класс, art - артикул, к которому позже привяжу картинки.
var v=tex.options[tex.selectedIndex].value,
m=mat.options[mat.selectedIndex].value,
va=new Array();
s=v.substr(0,2);
va=v.split(",");
a=(va[0]);
b=(va[1]);
c=(va[2]);
//"s"-переменная списка, "a"-прайс класс, "b"-выборка, "c"-артикул
Значение econ привяжу к выборке. е могу привязать, потому что здесь речь уже о выбранном оптионе, а мне их нужно раскидать. В class вынес список по материалу (vt, vb, va, vp). В итоге голова дымится, но ничего работающего не получилось. Что сделал:
<body>
<table width="600" align="center">
<colgroup><col width="210"><col width="390"></colgroup>
<tbody>
<form name="vl_form">
<tr><td class="left">Материал:</td>
<td><select id="vl_mat_id" name="vl_mat">
<option class="vt" selected="selected">ткань</option>
<option class="vb">бриз</option>
<option class="va">алюминий</option>
<option class="vp">пластик</option>
</select></td></tr>
<tr><td align="left">Фактура:</td>
<td><select id="vl_sort_id" name="vl_sort">
<option selected="selected">весь список</option>
<option>хиты продаж</option>
<option>премиум</option>
<option>эконом</option>
</select></td></tr>
<tr><td></td>
<td><select id="vl_tex_id" name="vl_tex">
<option selected="selected" value="vt1, econ, art">Алжир</option>
<option class="vt" value="vt1, econ, art">Стандарт</option>
<option class="vt" value="vt2, econ, art">Рибкорд</option>
<option class="vb" value="vb1, hit, art">Парсифаль</option>
<option class="va" value="va1, hit, art">Сканди</option>
<option class="vp" value="vp1, hit, art">Аквамарин</option>
<option class="vp" value="vp2, hit, art">Лоэнгрин</option>
<option class="vp" value="vp3, prem, art">Фрост</option>
</select></td></tr>
</form>
</tbody>
</body>
var mat=document.getElementById("vl_mat_id"),
sor=document.getElementById("vl_sort_id"),
tex=document.getElementById("vl_tex_id"),
tex_c=tex.cloneNode(true),
tex_co=tex_c.getElementsByTagName("option");
function f() {
var m=mat.options[mat.selectedIndex].className;
while (tex.options.length) {tex.remove(0)};
for (var i=0; i<tex_co.length;i++) {
if (tex_co[i].className.match(m)) {tex.appendChild(tex_co[i].cloneNode(true))}
}
}
mat.onchange=f;
Привязка здесь по классу, но как сделать, что бы привязывалось по переменным и сделать двойной динамический список. Прошу помощи, куда двигаться, возможно задачу решаю вовсе не тем способом, в яваскриптах далеко не профи. |
oneplus, уникальные значения, как я понял это артикул, в value, а всё остальное в class (классы материалов, классы фактур)
|
Можно ли сделать несколько классов? Или подклассы?
|
oneplus, можно class="premium metal"
|
oneplus,
нужно вырастить дерево зависимостей (обьект) и при переходе по веткам формировать селекты --- так же есть куча готовых решений и здесь и в космосе -- искать зависимые селекты плагин |
oneplus, этого плагина вам должно хватить
http://www.appelsiini.net/projects/chained |
Цитата:
то есть я могу задать в классе сразу два класса? например class="premium metal" и при необходимости использовать: if (tex_co[i].className.match("premium")){tex.appendChild(tex_c o[i].cloneNode(true))} или if (tex_co[i].className.match("metall")) {tex.appendChild(tex_co[i].cloneNode(true))} я правильно понимаю? |
Цитата:
Можно ли мою задачу выполнить на просто яваскрипте? И целесообразно ли это будет, заморачиваться только яваскриптом без плагинов? |
oneplus,
можно на js если построите дерево. |
Цитата:
|
Поэкспериментировал с классами "premium metal" - открыл много нового:)
Задача следующая: Как работать с уже сформированным списком? В первом списке я выбираю материал, список моделей фурнитуры собирается. Затем мне нужно сделать выборку по этому списку, то есть работать с уже сформированным. Как это реализовать? Как сохранить селект лист сформированных оптионов, например в цикле фор, что бы потом с ним работать? Пытался сделать, что то вроде этого:
var mat=document.getElementById("vl_mat_id"),
sor=document.getElementById("vl_sort_id"),
tex=document.getElementById("vl_tex_id"),
tex_c=tex.cloneNode(true),
tex_co=tex_c.getElementsByTagName("option"), sp, spc;
function f() {
var m=mat.options[mat.selectedIndex].className;
while (tex.options.length) {tex.remove(0)};
for (var i=0; i<tex_co.length;i++) {
if (tex_co[i].className.match(m)) {
tex.appendChild(tex_co[i].cloneNode(true));
sp=tex_co[i].cloneNode(true);
spc=sp.getElementsByTagName("option");
};
}
}
mat.onchange=f;
function p() {
var f=sor.options[sor.selectedIndex].className;
while (tex.options.length) {tex.remove(0)};
for (var i=0; i<spc.length;i++) {
if (spc[i].className.match(f)) {tex.appendChild(spc[i].cloneNode(true))};
}
}
sor.onchange=p;
Список сформировывается и я его записываю, затем работаю только с ним. Только то, что написал не работает. Не записывает. Почему? |
oneplus, имена переменным, функциям и классам надо осмысленные давать (как className, appendChild, cloneNode), чтобы было понятно о чем речь, а не просто букавки.
|
Прошу прощение, действительно не информативно.
var mat=document.getElementById("vl_mat_id"),//первый список - материалы
sor=document.getElementById("vl_sort_id"),//второй список - выборка
tex=document.getElementById("vl_tex_id"),//третий список - фактура
tex_c=tex.cloneNode(true),
tex_co=tex_c.getElementsByTagName("option"),
//тех_цо-клонированный список фактуры
sp, spc;//спц-клонированный список новосформированного
//функция при выборе материала
function f() {
//класс материала
var m=mat.options[mat.selectedIndex].className;
//удаляем список
while (tex.options.length) {tex.remove(0)};
//возвращаем список с нужным классом
for (var i=0; i<tex_co.length;i++) {
if (tex_co[i].className.match(m)) {
tex.appendChild(tex_co[i].cloneNode(true));
//записываем список для дальнейшего использования
sp=tex_co[i].cloneNode(true);
spc=sp.getElementsByTagName("option");
};
}
}
mat.onchange=f;
//функция для работы второго списка-выборки
function p() {
//класс выборки или сортировки
var f=sor.options[sor.selectedIndex].className;
//удаляем старый список
while (tex.options.length) {tex.remove(0)};
//возвращаем нужный список из ранее сохраненного
for (var i=0; i<spc.length;i++) {
if (spc[i].className.match(f)) {tex.appendChild(spc[i].cloneNode(true))};
}
}
sor.onchange=p;
|
|
Цитата:
tex.options.length=0 |
постарался разобрать пример связанных селектов
http://javascript.ru/forum/dom-windo...tml#post231937 правильно понимаю, сформированный список получится сохранить только через массив? вот этот список:
for (var i=0; i<tex_co.length;i++) {
if (tex_co[i].className.match(m)) {tex.appendChild(tex_co[i].cloneNode(true))};
для этого нужно писать еще цикл? |
Дописал так в первой функции f:
sp=tex.cloneNode(true);
spc=sp.getElementsByTagName("option");
Возможно это не совсем правильно, но работает. |
oneplus,
что и как вы пишите мне неизвестно, подсказать не могу. |
| Часовой пояс GMT +3, время: 07:16. |