显示隐藏基于先前选择下拉列表的选择选项

感谢您阅读我的问题… 😉

我正在构建一个Wordpress网站,该网站使用自定义post和自定义字段来显示车辆库存。 我希望访问者能够按分类法过滤post…

我用于钻取可用分类法(查询多个分类法)的插件将它可以为特定分类法找到的所有选项输出到下拉列表中。

为了防止下拉列表(即模型)变得太长,我想仅显示基于先前选择的那些选项。

因此,当访问者选择Vehicle = Cars时,制造商的下拉列表应仅显示汽车制造商。 当访问者选择一个制造商,即福特时,选择模型的下一个下拉列表应该只显示前一个选定制造商可用的模型,在这种情况下福特……

标签和0级值不会更改,但是当我添加或更改制造商或型号时,级别1和/或级别2会发生变化。

不是那么重要但是,如果可能的话,在“过滤”下拉列表中删除所有不需要的东西也是很好的。 如果是制造商下拉列表,则不需要等级0和所有空格。 在Model下拉列表的情况下,选择后不需要level-0,level1和所有空格。

以下是插件生成的HTML代码的示例:

   Cars Motorcycles     Cars    Ford    Chevrolet Motorcycles    Honda    Yamaha     Cars    Ford       Model 1       Model 2       Model 3    Chevrolet       Model 1       Model 2       Model 3 Motorcycles    Honda       Model 1       Model 2       Model 3    Yamaha       Model 1       Model 2       Model 3  

我可以用Javascript做一些简单的事情,但这对我来说并不简单,对不起… 😉

有人可以帮我弄清楚如何在Javascript / JQuery中做到这一点? 跨浏览器会很棒!

*编辑* HTML代码显示发送到浏览器的代码。 因为我不能修改插件那么多,我想“操纵”这个代码使它按照我想要的方式工作…… ;-)唯一固定的东西是:下拉列表的标签和所有的值Class =“level-0”元素。

因此,“汽车”和“摩托车”将始终保持不变。 但从那里一切都变得灵活变化。 即,当没有Chevy的post显示时,雪佛兰将不会生成HTML。 因此,该插件仅显示真正存在且可以找到的项目的下拉选项。 因此,当根本没有福特可用时,福特将不会进入下拉列车……

我宁愿不制作预定义的制造商及其模型清单。

订阅您的select元素的onchange事件: http : //www.w3schools.com/jsref/event_onchange.asp 。 在事件处理程序中,读取当前选定的值并相应地重新填充其他元素。

我建议你用javascript保存数据,这样你只需要为每个模型显示必要的选项,而不必隐藏一些..

我把它放在jsfiddle上,但网站一直在破碎。 下面的代码经过测试并可以正常工作。

好的现在工作:

  

然后在你的页面中你有