如何为多个输入编写javascript？

Question

我在我的应用程序中使用多个输入，我想根据第一个下拉列表的选择过滤第二个下拉列表。

@foreach (range(1, 5) as $x)
        <table>
            <tr>
                <td>
                    <div class="control-group">
                        <label class="control-label" for="course-{{ $x }}">
                             Course #{{$x}}
                        </label>
                        <div class="controls">
                            <select name="Course{{$x}}" id="Course{{$x}}" required="true">
                                <option selected value='0'>--Select Course--</option>
                                @foreach($Courses as $crs)
                                    <option value="{{$crs->Code}}">{{$crs->Code}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="control-group">
                        <label class="control-label" for="Subject-{{ $x }}">Subject </label>
                        <div class="controls">
                            <select name="Subject{{$x}}" id="Subject{{$x}}" required="true">
                            </select>
                        </div>
                    </div>
                </td>
             </tr>
         </table>
@endforeach

我的问题是如何在更改这些多个输入的第一个下拉列表时编写 js？

$("#Course").on("change", function()

Answer 1

您必须在第一个下拉列表中添加一个类。之后，您可以通过 Id 来跟踪它。例如：

 <select name="Course{{$x}}" class="courses" id="Course{{$x}}" required="true"> 

您可以通过 ID 对其进行跟踪

$(".courses").on("change", function(){
    courseId = $(this).attr("id");
});

现在您已经选择了课程 ID，您可以根据第一个下拉菜单的选择更改您的第二个下拉菜单。