javascript - 如何为多个输入编写 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");
});

现在您已经选择了类(class) ID，您可以根据第一个下拉列表的选择更改第二个下拉列表。