如何在从下拉菜单中进行选择后显示复选框列表，具体取决于下拉菜单选择？

Posted 2023-05-08

【中文标题】如何在从下拉菜单中进行选择后显示复选框列表，具体取决于下拉菜单选择？

【英文标题】：How to make a checkbox list appear after a selection from a drop-down menu, depending on drop-down menu selection?

【发布时间】：2016-09-24 23:49:50

【问题描述】：

抱歉标题不好。基本上我想做的是以下几点：

我有一个下拉菜单，其中有几个选项，我想在其下方显示一个“清单”，其选项取决于下拉菜单中的选择。

因此，例如，如果我从下拉菜单中选择“水”，我希望出现在其下方的清单标记为“哪种类型？”给我 Dasani、Aquafina 或 Fiji 的选项。同样，如果我从下拉菜单中选择“苏打水”，我会希望清单为我提供芬达、可口可乐或雪碧的选项。

【参考方案1】：

如果您创建了所有复选框菜单（假设您都知道它们），并将它们初始化为隐藏，那么您可以为下拉菜单创建 OnChange 事件，并显示相应的复选框菜单。

【参考方案2】：

对于您的选择菜单，使用 Jquery .change 函数来确定您的选择菜单是否已更改。

$('#beverageSelect').change(function()
    // Logic here
);

在 change 函数中，有一个 if 语句来确定所选下拉列表的值。这将检查它是“水”还是“苏打水”或发生了什么。

然后，我会在我的视图中隐藏复选框，并使用 javascript 切换将取消隐藏这些元素的类。

<div class="unhide-checkbox">
    <!-- Put checkbox for water here -->
</div>

<div class="unhide-checkbox">
    <!-- Put checkbox for soda here -->
</div>

那个 .unhide-checkbox 类有一个“display:none;”属性，so when toggled 它将显示/隐藏您的信息。