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

【问题标题】：disable/hide drop down options(fetched from database) selected in previous drop down field在上一个下拉字段中选择的禁用/隐藏下拉选项（从数据库中获取）
【发布时间】：2019-07-26 06:09:14
【问题描述】：

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

例如：如果我们有 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 解决方案。

【问题讨论】：

标签： javascript jquery html spring-boot thymeleaf

【解决方案1】：

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

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

【讨论】：