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，您可以根据对第一个下拉菜单的选择来更改第二个下拉菜单。

如何为多个输入编写JavaScript？

1 个答案: