实现JQuery函数以在每次选择DropDownList时触发事件

implementing a JQuery function to trigger an event every time a DropDownList is selected

本文关键字:DropDownList 事件 选择 函数 JQuery 实现      更新时间:2023-09-26

我是MVC和JQuery概念的新手,我被困在这里,请帮助

我正在尝试为我的项目实现级联下拉列表,并且我已经使用Jquery函数实现了级联下拉列表

我的问题是,对于我的项目,我需要增加DropDownList的数量,因为我已经创建了一个按钮来增加DropDownList的行数,但级联的DropDownList只适用于DropDown列表的第一行,而不适用于其他任何行。

第一行调用JQuery函数实现级联函数,但从第二行调用JQuery函数

所以每次从DropDownList中选择一个值时,我都需要帮助调用Jquery函数

我的代码如下

PartialView代码

@using (Ajax.BeginForm("Index", options))
{
<div class="panel panel-info">
    <div class="panel-heading"> </div>
    <div class="panel-body">
        <div class="form-group col-md-offset-4 ">
            @Html.Label("Enter TimeSheet Date:")
            @Html.Editor("Date", new { htmlAttributes = new { @class = "form-control datepicker" } })
        </div>
       <table class="table">              
           <tr>
               <th> </th>
               <th> Project </th>
               <th> Modules </th>
               <th> Task </th>
               <th> No of Hours</th>
               <th> Note </th>
           </tr>
          @for(int i=0;i< Model.CountForTimesheetForm; i++)
          {
           <tr>
            <td></td>
            <td>@Html.DropDownList("ProjectName", new SelectList(Model.projectList, "Value", "Text")
               , "Please Select a Project", new { @class = "form-control" })</td>
                        <td>
               <select id="module" name="module" style="width:200px"></select></td>
               <td>@Html.Editor("TaskName", new { htmlAttributes = new { @class = "form-control" } })</td>
               <td>@Html.Editor("NoOfHour", new { htmlAttributes = new { @class = "form-control" } })</td>
               <td>@Html.Editor("Note", new { htmlAttributes = new { @class = "form-control" } })</td>
           </tr>
          }
           <tr>
             <td>  <button type="submit" class="btn btn-default">Add Row</button></td>
           </tr>
       </table>

        </div>
    </div>
  }

级联的Jquery代码

<script language="javascript" type="text/javascript">
    $(function () {
        $('#ProjectName').change(function () {
            $.getJSON('/TimeTracker/GetModules/' + $('#ProjectName').val(), function (data) {
                var items = '<option>Select a Modules</option>';
                $.each(data, function (i, module) {
                    items += "<option value='" + module.Value + "'>" + module.Text + "</option>";
                });
                $('#module').html(items);
            });
        });
    });

您正在重复页面标签上不应重复的id属性。

HTML5规范说了同样的话,但换言之。它说ID在其主子树中必须是唯一的,如果我们阅读它的定义,它基本上就是文档

我希望它能帮助你。