Реализовал я поставленную задачу. Также сделал подборщика. Может кому пригодится:
$(document).ready(function() {
//Задали массивы
var ConfigName = ["Наименование", "Мощность, Вт", "Напряжение, В", "Ток, А"]; //Массив для названия каждого уровня массива Config
var Config = {
"БПИ": {
"30": {
"12": [ "2.5" ],
"24": [ "1.25" ],
"48": [ "0.65" ]
},
"60": {
"12": [ "5.0" ],
"24": [ "2.5" ],
"36": [ "1.5" ],
"48": [ "1.25" ]
},
"125": {
"12": [ "10.0" ],
"24": [ "5.0" ],
"48": [ "2.5" ]
},
"250": {
"12": [ "20.0" ],
"24": [ "10.0" ],
"48": [ "5.0" ]
}
}
};
//##############################################################################
// Рекурсивная функция для вывода конфигураций товара
var ResultArray = [];
var current_level = -1;
function Recursion(Arr){
current_level++;
if(Arr instanceof Object){
for ( var key in Arr) {
if (Arr instanceof Array) {
content = Arr[key];
} else if (Arr instanceof Object) {
content = key;
}
if(ResultArray[current_level] == null) {
ResultArray[current_level] = content+";";
} else {
if(ResultArray[current_level].indexOf(content) == -1) {
ResultArray[current_level] = ResultArray[current_level]+content+";";
}
}
Recursion(Arr[key]);
}
}
current_level--;
}
Recursion(Config); //Вызвали рекурсивную функцию
/* наводим порядок в массиве ResultArray[] и переносим данные в двумерный массив */
var SplitArray = [];
for ( var int = 0; int < ResultArray.length; int++) {
ResultArray[int] = ResultArray[int].slice(0, -1);
SplitArray[int] = ResultArray[int].split(";");
}
/* Вывод формы подбора в браузер */
for ( var int = 0; int < ConfigName.length; int++) {
if(int == 0) {
$("#wrap").append("<dl></dl>");
} else {
$("#wrap").append("<dl class=\"dn\"></dl>");
}
$("#wrap dl:eq("+int+")").append("<dt>"+(int+1)+". "+ConfigName[int]+":</dt>");
for ( var int2 = 0; int2 < SplitArray[int].length; int2++) {
$("#wrap dl:eq("+int+")").append("<dd><span><a class=\"das\" href=#>"+SplitArray[int][int2]+"</a></span></dd>");
}
}
/* Обработка событий */
$("a.das").click(function(){
var current_dl = $(this).parents("dl").index(); // Текущий <dl>
var length_conf = $("dl").size(); // К-во <dl>
/* Убрали лишние class="active" */
for(var int=current_dl; int<length_conf; int++){
$("dl:eq("+int+") span").removeClass("active");
}
/* Добавили нужному элементу class="active" и убрали всем лишним на текущем уровне */
$(this).parents("dl").find("span").removeClass("active");
$(this).parent("span").toggleClass("active");
/* Формируем массив active_arr[] */
var active_arr = []; // Массив для хранения <span class="ACTIVE">
for ( var int = 0; int < current_dl; int++) {
active_arr[int] = $("dl:eq("+int+") span.active a.das").text();
}
/* Формируем массив, содержащий конфигурацию для следующего подуровня */
var ConfigTemp = Config;
for ( var int=0; int<active_arr.length; int++) {
ConfigTemp = ConfigTemp[active_arr[int]];
}
var correct_arr = [];
for ( var key in ConfigTemp) {
if (current_dl < (length_conf-1)) {
correct_arr.push(key);
} else {
correct_arr.push(ConfigTemp[key]);
}
}
/* Скрыли все <dd> следующего уровня */
$("dl:eq("+(current_dl)+") dd").hide();
/* Показали только подходящие */
count_dd = $("dl:eq("+(current_dl)+") dd").length;
for ( var int = 0; int < correct_arr.length; int++) {
for(var int2=0; int2<count_dd; int2++) {
if( $("dl:eq("+(current_dl)+") dd:eq("+int2+") span a").text() == correct_arr[int] ) {
$("dl:eq("+(current_dl)+") dd:eq("+int2+")").show();
}
}
}
$(this).parents("dl").nextAll("dl").delay(200).hide(); //Скрыли
$(this).parents("dl").next("dl").fadeIn(); //Показали
if(count_dd == 0) {
$("form").fadeIn();
} else {
$("form").hide();
}
return false;
});
$("form input[type=submit]").click(function(){
//var query =
return false;
});
});
Если кому интересно посмотреть рабочий пример, пишите в личку - дам ссылку.
