依赖下拉最后一级关系不起作用

问题描述

我偶然发现了一个针对依赖下拉列表的jQuery解决方案，并根据我的需要进行了定制。但是由于某种原因，最后一个级别无法与以上级别配合使用。这是JSFiddle，如果您能看的话，我将不胜感激。语言是匈牙利语，但要点是，如果我在第一层上选择“gyümölcs”，在第二层上选择“ dinnye”，在第三层上选择“sárga”，在堡垒上选择“ szeletelt”，则最后一个选项应该仅为“ keresztbe”和“ hosszaba”。现在由于某种原因，我看到所有四个选项都可以从第四级使用，而不仅仅是相关的两个...

解决方法

您可以在此处使用filter仅显示与_rel匹配的那些选项。因此，您的代码如下所示：

 $forth.on("change",function() {
    var _rel = $(this).val();
   //hide all option
    $fifth.find("option:not(.label)").hide();
    //filter 
    $fifth.find("option").filter(function() {
      //check if value in rel is equal
      return $(this).attr('rel') == _rel;
    }).show(); //show that option
    $fifth.prop("disabled",false);
  });

演示代码 ：

$(document).ready(function() {
  var
    $first = $("#category1"),$second = $("#category2"),$third = $("#category3"),$forth = $("#category4"),$fifth = $("#category5");


  /* kategóriák */
  /* kettest választ */

  $first.on("change",function() {
    var _rel = $(this).val();
    $second.find("option").attr("style","");
    $second.val("");
    $third.val("");
    $forth.val("");
    $fifth.val("");

    $second.prop("disabled",true);
    $third.prop("disabled",true);
    $forth.prop("disabled",true);
    $fifth.prop("disabled",true);


    if (!_rel) {
      $second.prop("disabled",true);
      $third.prop("disabled",true);
      $forth.prop("disabled",true);
      $fifth.prop("disabled",true);

      return;
    }
    $second.find("[rel=" + _rel + "]").show();
    $second.prop("disabled",false);

  });

  /* hármast választ */

  $second.on("change",function() {
    var _rel = $(this).val();

    $third.find("option").attr("style","");


    $third.val("");
    $forth.val("");
    $fifth.val("");

    $third.prop("disabled",true);


    if (!_rel) {

      $third.prop("disabled",true);

      return;
    }
    $third.find("[rel=" + _rel + "]").show();
    $third.prop("disabled",false);

  });

  /* négyest választ */

  $third.on("change",function() {
    var _rel = $(this).val();
    $forth.find("option").attr("style","");
    $forth.val("");
    $fifth.val("");

    $forth.prop("disabled",true);


    if (!_rel) {

      $forth.prop("disabled",true);

      return;
    }
    $forth.find("[rel=" + _rel + "]").show();
    $forth.prop("disabled",false);

  });

  /* ötöst választ */

  $forth.on("change",false);


  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="category1">1. szint:</label>
<select name="category1" id="category1">
  <option class="label" value>Kérjük válasszon!</option>
  <option value="zoldseg">Zöldség</option>
  <option value="gyumolcs">Gyümölcs</option>
</select>
</br>

<label for="category2">2. szint:</label>
<select disabled="disabled" name="category2" id="category2">
  <option class="label" value>Kérjük válasszon!</option>
  <option rel="gyumolcs" value="puha">Szőlő</option>
  <option rel="gyumolcs" value="kemeny">Dinnye</option>
</select>
</br>

<label for="category3">3. szint:</label>
<select disabled="disabled" name="category3" id="category3">
  <option class="label" value>Kérjük válasszon!</option>
  <option rel="kemeny" value="piros">Piros</option>
  <option rel="kemeny" value="sarga">Sárga</option>
</select>
</br>

<label for="category4">4. szint:</label>
<select disabled="disabled" name="category4" id="category4">
  <option class="label" value>Kérjük válasszon!</option>
  <option rel="sarga" value="szeletelt">Szeletelt</option>
  <option rel="sarga" value="kockazott">Kockázott</option>
</select>
</br>

<label for="category5">5. szint:</label>
<select disabled="disabled" name="category5" id="category5">
  <option class="label" value>Kérjük válasszon!</option>
  <option rel="kockazott" value="fagyasztott">Fagyasztott</option>
  <option rel="kockazott" value="friss">Friss</option>
  <option rel="szeletelt" value="keresztbe">Keresztbe</option>
  <option rel="szeletelt" value="hosszaba">Hosszába</option>
</select>