html - 相关下拉最后一级关系不起作用

Question

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

标签： htmljquerydropdownhtml-select

Answer 1

您可以在此处使用过滤器仅显示匹配的选项。因此_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);
    $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>