Question

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

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

Answer 1

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

然后在函数中，获取所选的值。最后，在其他下拉菜单中找到该选项，并将其设置为“ disabled”属性。

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

1 个答案: