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

我不熟悉MVC和JQuery的概念，我被困在这里，请帮助

我正在尝试为我的项目实现级联DropDownList，我已经使用Jquery函数实现了级联DropDownList

我的问题是，对于我的项目，我需要增加DropDownList的数量，因为我已经创建了一个按钮来增加DropDownList的行数，但是级联DropDownList只对第一行有效，对任何其他DropDownList行无效

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

所以我需要帮助在每次选择DropDownList中的值时调用Jquery函数

我的代码如下

部分视图代码

@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>
  }

@使用（Ajax.BeginForm（“索引”，选项））
{
@标签（“输入时间表日期：”）
@编辑器（“Date”，new{htmlAttributes=new{@class=“form control datepicker”}}）
项目
模块
任务
小时数
注
@对于（int i=0；i

用于级联的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);
            });
        });
    });

$（函数（）{
$（'#ProjectName'）。更改（函数（）{
$.getJSON（'/TimeTracker/GetModules/'+$（'#ProjectName'）.val（），函数（数据）{
变量项='选择一个模块'；
$。每个（数据、功能（i、模块）{
项目+=“”+模块.文本+“”；
});
$（“#模块”）.html（项目）；
});
});
});

---

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

说了同样的话，但换言之。它说ID在其主子树中必须是唯一的，如果我们需要的话，它基本上就是文档

---

我希望它能帮助您。

此代码存在多个问题。您生成的重复

id

属性是无效的html和

$（“#ProjectName”）

将只获得具有

id=“ProjectName”

属性的第一个元素。您还生成了重复的

name

属性，因此在发回时无法绑定到模型。您需要在

for

循环中使用

@Html.DropDownListFor（m=>m[i].ProjectName、new SelectList（…

）生成控件，并给出可用于jQuery选择器的dropdownlist类名