时间戳

首页 > 解决方案 > 在上一个下拉字段中选择的禁用/隐藏下拉选项（从数据库中获取）

javascript - 在上一个下拉字段中选择的禁用/隐藏下拉选项（从数据库中获取）

问题描述

我有多个下拉菜单都有相同的选项。在特定的下拉字段中，我想禁用或隐藏在前一个下拉字段中选择的值。

例如：如果我们有 3 个选项（A、B、C）并且我们在下拉菜单 1 中选择 A，那么 A 应该在剩余的下拉菜单中被隐藏或禁用，并且应该相应地反映任何动态变化。

正在从数据库中获取下拉值并显示在列表中。
以下是html代码。

<select class="form-control" th:name="course1" th:id="course1">
    <option th:value="Preference_1" style="color:#8F8B87" selected>Select Preference 1</option>
    <option th:each="i : ${courseList}" th:value="${i.electiveCourseId}" th:text="${i.electiveName}" style="color:#000"></option>
</select>

<select class="form-control" th:name="course2" th:id="course2">
    <option th:value="Preference_2" style="color:#8F8B87" selected>Select Preference 2</option>
    <option th:each="i : ${courseList}" th:value="${i.electiveCourseId}" th:text="${i.electiveName}" style="color:#000"></option>
</select>

为上述问题寻找 jQuery 解决方案。

标签： javascriptjqueryhtmlspring-bootthymeleaf

解决方案

我会为每个字段设置一个更改处理程序。https://api.jquery.com/change

然后在函数中，获取选中的值。最后，在其他下拉列表中找到该选项并将其赋予“禁用”属性。

推荐阅读