根据先前的选择下拉显示隐藏选择选项

Question

感谢您阅读我的问题... ;-)

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

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

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

因此，当访问者选择 Vehicle = Cars 时，制造商的下拉菜单应仅显示汽车制造商。 当访问者选择制造商时，即福特，选择模型的下一个下拉菜单应该只显示之前选择的制造商可用的模型，在这种情况下是福特...

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

没那么重要，但如果可能，最好去掉所有不需要显示在“已过滤”下拉菜单中的内容。如果是制造商下拉菜单，则不需要级别 0 和所有空格。 如果是 Model 下拉菜单，选择后不需要 level-0、level1 和所有空格。

这是由插件生成的 HTML 代码的示例：

<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
    <option></option>
    <option class="level-0" value="cars" >Cars</option>
    <option class="level-0" value="motorcycles" >Motorcycles</option>
</select>

<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
    <option></option>
    <option class="level-0" value="cars" >Cars</option>
    <option class="level-1" value="ford" >&nbsp;&nbsp;&nbsp;Ford</option>
    <option class="level-1" value="chevrolet" >&nbsp;&nbsp;&nbsp;Chevrolet</option>

    <option class="level-0" value="motorcycles" >Motorcycles</option>
    <option class="level-1" value="honda" >&nbsp;&nbsp;&nbsp;Honda</option>
    <option class="level-1" value="yamaha" >&nbsp;&nbsp;&nbsp;Yamaha</option>    
</select>

<label for="qmt-model">Model:</label>
<select id="qmt-model" name="model">
    <option></option>
    <option class="level-0" value="cars" >Cars</option>
    <option class="level-1" value="ford" >&nbsp;&nbsp;&nbsp;Ford</option>
    <option class="level-2" value="model-1-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>
    <option class="level-1" value="chevrolet" >&nbsp;&nbsp;&nbsp;Chevrolet</option>
    <option class="level-2" value="model-1-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>    

    <option class="level-0" value="motoren" >Motorcycles</option>
    <option class="level-1" value="honda" >&nbsp;&nbsp;&nbsp;Honda</option>
    <option class="level-2" value="model-1-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>
    <option class="level-1" value="yamaha" >&nbsp;&nbsp;&nbsp;Yamaha</option>
    <option class="level-2" value="model-1-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option>
    <option class="level-2" value="model-2-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option>
    <option class="level-2" value="model-3-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>
</select>

我可以用 Javascript 做一些简单的事情，但这对我来说并不简单，抱歉... ;-)

有人可以帮我弄清楚如何在 Javascript/JQuery 中执行此操作吗？ 跨浏览器会很棒！

* 编辑 * HTML 代码显示发送到浏览器的代码。因为我不能对插件进行太多修改，所以我想“操纵”这段代码以使其按我想要的方式工作...... ;-) 唯一固定的是：下拉列表的标签和所有 Class="level-0" 元素的值。

所以“汽车”和“摩托车”将永远存在，永远不会改变。但从那里一切都可以灵活改变。 IE。当雪佛兰没有要显示的帖子时，雪佛兰将不会出现在生成的 HTML 中。因此，该插件仅显示真实存在且可以找到的项目的下拉选项。 因此，当根本没有可用的福特时，福特将不会出现在下拉列表中...

我宁愿不制作制造商及其型号的预定义列表。

Answer 1

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

Answer 2

我建议您将数据保存在 javascript 中，这样您只需要显示每个模型的必要选项，而不必隐藏一些..

我把它放在 jsfiddle 上，但网站一直在崩溃。 下面的代码已经过测试并且可以工作。

现在可以工作了：

<script type="text/javascript">
var vehicles = {"Cars": {
            "Ford" : [ "Fiesta", "Focus", "Fusion"], 
            "Chevy": [ "Malibu", "Corvette", "Tahoe"],
            },
 "Motorcycles": {
      "Honda": ["model 1", "model 2", "model 3"],
      "Yamaha": ["model 1", "model 2", "model 3", "model 4"]
    }
};


$(document).ready(function() {
  var $vehiclesList = $("#qmt-vehicle");
  var $manufList = $("#qmt-manufacturer");
  var $modelList = $("#qmt-model");
  var selectedType = null
  var selectedManuf = null;
  $.each(vehicles, function(key, vehicle) {
    $vehiclesList.append($("<option/>", {value:key,text:key}));
  });

  $vehiclesList.bind("change", function() {
    selectedType = $(this).val();
    if (selectedType && vehicles[selectedType]) {
      var manufacturers = vehicles[selectedType];
       $("#qmt-manufacturer option").not(":first").remove();
      $("#qmt-model option").not(":first").remove();
      $.each(manufacturers, function(key, manufacturer) {
         $manufList.append($("<option/>", { value: key, text: key}));
      });
    }
  });

 $manufList.bind("change", function() {
    var selectedManuf = $(this).val();
     $("#qmt-model option").not(":first").remove();
    if (selectedManuf  && vehicles[selectedType] && vehicles[selectedType][selectedManuf]) {
      var models = vehicles[selectedType][selectedManuf];      
      $.each(models, function(key, model) {
         $modelList.append($("<option/>", { value: model, text: model}));
      });
    }
  });

 });
</script>

然后在您的页面中，您将拥有

<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
    <option></option>

</select>

<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
  <option></option>
</select>

<label for="qmt-model">Model:</label>
<select id="qmt-model" name="model">
  <option></option>
</select>