javascript - 根据选择重置选择选项

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 年，英语和薯条，然后将英语更改为法语，则第三个选择选项现在显示薯条和贻贝，而不仅仅是贻贝。因此它工作正常，按顺序完成，但是一旦您更改某些内容，我需要在动态填充它们之前重置以下选择选项。

有什么办法可以实现这一点吗？

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

这会将“隐藏”类添加到所有可用选项中，然后仅取消隐藏您希望可用的特定选项。此外，它会选择第一个可用选项，这样您就不会留下陈旧的下拉菜单。