重新選擇的選項基礎上選擇

Question

我有以下數據集

array:4 [ 
    "data" => array:2 [ 
    2015 => array:2 [ 
     "english" => array:1 [ 
     "chips" => array:1 [ 
      0 => "img1.png" 
     ] 
     ] 
     "french" => array:1 [ 
     "mussles" => array:1 [ 
      0 => "img1.png" 
     ] 
     ] 
    ] 
    2016 => array:2 [ 
     "indian" => array:1 [ 
     "madras" => array:1 [ 
      0 => "img1.png" 
     ] 
     ] 
     "italien" => array:1 [ 
     "pasta" => array:1 [ 
      0 => "img1.png" 
     ] 
     ] 
    ] 
    ] 
] 

適當地顯示正確的數據我下面

<select id="year" class="form-control"> 
    @foreach($fileData["data"] as $year => $countries) 
     <option value="{{ $year }}">{{ $year }}</option> 
    @endforeach 
</select> 

<select id="country" class="form-control hide"> 
    @foreach($fileData["data"] as $year => $countries) 
     @foreach ($countries as $country => $dishes) 
      <option class="year-{{ $year }} hide" value="{{ $country }}">{{ $country }}</option> 
     @endforeach 
    @endforeach 
</select> 

<select id="dish" class="form-control hide"> 
    @foreach($fileData["data"] as $year => $countries) 
     @foreach ($countries as $country => $dishes) 
      @foreach ($dishes as $dish => $images) 
       <option class="year-{{ $year }} country-{{ $country }} hide" value="{{ $dish }}">{{ $dish }}</option> 
      @endforeach 
     @endforeach 
    @endforeach 
</select> 

所以第二和第三選擇是隱藏的，直到前一個被選中。
在JavaScript我做

var getSelectedYear = function() { 
    return $("#year option:selected").val(); 
} 

var getSelectedCountry = function() { 
    return $("#country option:selected").val(); 
} 

$('#year').change(function() { 
    $("#country option.year-" + getSelectedYear()).removeClass('hide'); 
    $("#country").removeClass('hide'); 
}) 

$('#country').change(function() { 
    $("#dish option.year-" + getSelectedYear() + ".country-" + getSelectedCountry()).removeClass('hide'); 
    $("#dish").removeClass('hide'); 
}) 

所以，如果我的第一選擇選擇2015年，第二個選擇將顯示英語和法語。如果我然後選擇英語，第三選擇將顯示芯片。

這一切工作正常。我的問題是這樣的。如果我選擇2015年，英語和芯片，然後將英語換成法語，第三選擇選項現在顯示芯片和mussles而不是隻是mussles。所以它按順序正常工作，但只要你改變了一些東西，我需要在動態填充之前重新設置下面的選項。

有什麼辦法可以達到這個目的嗎？

Answer 1

在取消隱藏所需的其他選項之前，隱藏所有其他選項怎麼辦？

$('#year').change(function() { 
    // hides all the options 
    $("#county option").addClass("hide"); 
    $("#country option.year-" + getSelectedYear()).removeClass('hide'); 
    $("#country").removeClass('hide'); 

    // gets the value of the first available option and resets your dropdown to that 
    var first_val = $("#country option:not('.hide')").first().val(); 
    $("#country").val(first_val); 
    // manually trigger the change so that it propagates to the following dropdown 
    $("#country").trigger("change"); 
}) 

$('#country').change(function() { 
    // hides all the options 
    $("#dish option").addClass("hide"); 
    $("#dish option.year-" + getSelectedYear() + ".country-" + getSelectedCountry()).removeClass('hide'); 
    $("#dish").removeClass('hide'); 

    // gets the value of the first available option and resets your dropdown to that 
    var first_val = $("#dish option:not('.hide')").first().val(); 
    $("#dish").val(first_val); 
}) 

這增加了「隱藏」類所有可用的選項，然後取消隱藏只有你想成爲可使用的特定的人。此外，它會選擇第一個可用選項，以便您不會留下陳舊的下拉菜單。