JQuery цепочка раскрывающегося фильтра

Question

Я пытаюсь реализовать цепочку выпадающего фильтра, используя только javascript - jquery.

Решение, которое мне нужно, это http://www.codeassembly.com/Simple-chained-combobox-plugin-for-jQuery.

Однако я не могу использовать это решение, так как оно зависит от файла PHP. Есть ли способы реализовать это исключительно с помощью JavaScript (клиент и / или сервер)?

Большое спасибо

Answer 1

Для простого плагина jQuery, который не нуждается ни в каком другом источнике данных или файле данных.Вы можете использовать:

http://code.google.com/p/jquery-option-tree/

Все параметры определены в коде JS, надеюсь, у вас не будет большого набора данных.

<input type="text" name="demo1" />

    var option_tree = {
       "Option 1": {"Suboption":200},
       "Option 2": {"Suboption 2": {"Subsub 1":201, "Subsub 2":202},
             "Suboption 3": {"Subsub 3":203, "Subsub 4":204, "Subsub 5":205}
            }
    };

    $('input[name=demo1]').optionTree(option_tree);

Answer 2

Извините за откровенное саморекламу, но у меня раньше была та же проблема, и я написал плагин Chained Selects , чтобы соответствовать моим потребностям. Это похоже на то, что предлагал Glennular, но с некоторыми отличиями. Вместо того, чтобы строить выборки из массива JSON, он использует атрибуты класса HTML, чтобы выяснить, какие опции должны быть показаны. Например:

<select id="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

Затем вы должны связать их с помощью следующего JavaScript:

$("#series").chained("#mark"); 

или, если вы предпочитаете более длинную форму:

$("#series").chainedTo("#mark");

Вы также можете проверить источник отдельной демонстрационной страницы .