JQuery链接过滤器下拉列表

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

我需要的解决办法是

但是我不能使用这个解决方案，因为它依赖于一个PHP文件。是否有方法单独使用javascript（客户端和/或服务器端）实现这一点

---

非常感谢不需要任何其他数据源或数据文件的简单jQuery插件。您可以使用：

所有选项都在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);

变量选项树={
“选项1”：{“子选项”：200}，
“备选案文2”：{“子备选案文2”：{“子备选案文1”：201，“子备选案文2”：202}，
“分备选案文3”：{“分备选案文3”：203，“分备选案文4”：204，“分备选案文5”：205}
}
};
$（'input[name=demo1]'）。选项树（选项树）；

对于公然的自我推销，我感到很抱歉，但我之前也遇到了同样的问题，并编写了符合我需要的插件。它与Glennular提供的类似，但有一些不同。它没有从JSON数组中构建selects，而是使用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>

或者，如果您喜欢更长的形式：

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

---

您可能还需要检查独立消息的来源。

似乎我对此的投票太早了一点-尝试制作表单并意识到缺少一些关键功能：1）我无法为每个下拉列表设置不同的默认选择消息，例如“请选择国家”和“请选择州”；2） 命名每个子下拉列表似乎是不可能的，它会在其后面附加“u”，但会将整个选择值放入一个字段中（工作正常，但命名每个子下拉列表会更好）。@sologup 1）有一个空的_值参数，您可以传入以设置默认消息。看看演示页面上的示例。只是一个关于链接选择的问题。如果我想让“3系”同时属于宝马和奥迪怎么办？@xEnOn我查看了他的资料，显然你可以添加多个等级

value=“series-3”class=“bmw audi”

@scragar我之前尝试过添加多个类，但似乎不起作用。

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