JQuery 链式过滤器下拉列表

Question

我正在尝试仅使用 javascript - jquery 来实现链式过滤器下拉列表。

我需要的解决方案是 http://www.codeassemble.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");

您可能还想检查单独的 演示页面。