时间戳

首页 > 解决方案 > 如何正确显示和隐藏具有动态变量的多个 html 选择？

javascript - 如何正确显示和隐藏具有动态变量的多个 html 选择？

问题描述

我有一个选项，我们称之为汽车品牌：

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

我隐藏了它们，所以当用户在第一次选择中选择 TOYOTA 或 LEXUS 时，汽车模型将按其主题显示：

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

它正在工作，汽车模型选择出现，但我不明白如何用这个动态变量隐藏另一个？

我的意思是我选择 TOYOTA 并#car-models-toyota select显示，选择 LEXUS 并#car-models-lexus select显示，但是当它显示时toyota select应该被隐藏。

你能帮我吗？

标签： javascriptjquery

解决方案

您可以通过在每个 first 事件中首先隐藏所有元素，然后selectselectchange通过您提供的代码在 e 上显示所需的元素来做到这一点。因此，您所要做的就是选择所有选择（品牌选择除外），$('select').not('#car-brands')然后使用hide()将它们全部隐藏。

所以这应该是这样的：

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

推荐阅读