Question

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

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

我的问题是，对于我的项目，我需要增加DropDownList的数量，因为我创建了一个增加DropDownList行的按钮，但级联DropDownList仅适用于第一行，而不适用于其他行的任何其他行DropDownList。

第一行调用JQuery函数实现级联函数，但是从第二行调用make到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);
            });
        });
    });

Answer 1

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

HTML 5 specification说同样的话，但换句话说。它说ID在 home subtree 中必须是唯一的，如果我们read the definition of it，它基本上就是文档。

我希望它可以帮到你。

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

1 个答案: