如何正確顯示和隱藏帶有動態變量的多個 html 選擇？

Question

我有一個帶有選項的 select，我們稱之為汽車品牌：

<select id="car-brands">
    <option value="noselection">Car Brand</option>
    <option value="toyota">TOYOTA</option>
    <option value="lexus">LEXUS</option>
</select>

我還有另外 2 個選擇，我們稱它們為汽車模型：

<select id="car-models-toyota" style="display:none;">
    <option value="noselection">Car Model</option>
    <option value="toyota">AVENSIS</option>
    <option value="lexus">CAMRY</option>
</select>
<select id="car-models-lexus" style="display:none;">
    <option value="noselection">Car Model</option>
    <option value="toyota">AVENSIS</option>
    <option value="lexus">CAMRY</option>
</select>

我隱藏了它們，所以當用戶在第一個 select 中選擇 TOYOTA 或 LEXUS 時，汽車模型將按其主題顯示：

$('#car-brands').change(function() {
    const brand = $(this).val();
    $(`#car-models-${brand}`).show();
});

它正在工作，汽車模型選擇出現，但我不明白如何用這個動態變量隱藏另一個？

I mean I select TOYOTA and #car-models-toyota select shows up, select LEXUS and #car-models-lexus select shows up, but when it shows up toyota select should be hidden.

你能幫我嗎？

Answer 1

您可以通過將所有select元素首先隱藏在每個第一個select中， change事件，然后通過您提供的代碼在 e 上顯示所需的元素來做到這一點。 因此，您所要做的就是使用$('select').not('#car-brands')對 select 所有選擇（品牌選擇除外），然后使用hide()將所有選擇隱藏。

所以這應該是這樣的：

$('#car-brands').change(function() {
    const brand = $(this).val();
    $('select').not('#car-brands').hide();
    $(`#car-models-${brand}`).show();
});