Dependent dropdown last level relation isn't working

Question

I've stumbled upon a jQuery solution for a dependent dropdown list, and tailored it to my needs. However for some reason the last level isn't working together with the level above. Here is the JSFiddle, I would really appreciate, if you could look at it. The language is Hungarian but the point is, if I choose "gyümölcs" on the first level, "dinnye" on the second, "sárga" on the third, "szeletelt" for the fort, the last options should be only "keresztbe" and "hosszaba". Now for some reason I see all four options avaliable from the forth level not just the related two...

Answer 1

You can use filter here to show only those option that matches _rel .So your code will look like below :

 $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);
  });

Demo code :

$(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);
    $forth.prop("disabled", true);
    $fifth.prop("disabled", true);


    if (!_rel) {

      $third.prop("disabled", true);
      $forth.prop("disabled", true);
      $fifth.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);
    $fifth.prop("disabled", true);


    if (!_rel) {

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

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

  });

  /* ötöst választ */

  $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);


  });

});

<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>