Asp.net mvc 4 动态添加行的级联下拉列表

我到处都搜索过，但找不到动态添加行中的级联下拉列表（JQuery）指南。这些是用户使用Jquery在运行时添加的行。有两个下拉列表，我希望一个可以依赖另一个

下面链接中的代码有效，因为我们知道只有一个SelectedLocation。然而，在我的中，将有>=1（因为用户可以添加任意多的行）

有什么想法吗

谢谢

编辑： 下面的代码适用于添加的第一行。之后添加的每一行都不起作用。显然，这是因为相关元素（Selecteduserid和Selectedrate）的ID与第一行中的ID相同

$("#addItem").click(function () {
    $.ajax({
        url: '/Claims/BlankEditorRow',
        cache: false,
        //async: true,
        success: function (html) {
            $("#editorRows").append(html);
            $('#editorRows .date').datepicker({ dateFormat: "dd/mm/yy" });
            $('#Selecteduserid').change(function () {
                var Selecteduserid = $(this).val();
                if (Selecteduserid != null && Selecteduserid != '') {
                    $.getJSON('/Claims/Rates', { locId: Selecteduserid },
            function (rate) {

                var RateSelect = $('#Selectedrate');
                RateSelect.empty();
                $.each(rate, function (index, rate) {
                    RateSelect.append($('<option/>', {
                        value: rate.value,
                        text: rate.text
                    }));
                });
            });

                }
            });
        }
    });

    return false;
});

我对每个添加行的局部视图：

@model authentication.ViewModels.LineViewModel


@using authentication.WebUI.Helpers
<tr class="editorRow  ">
    @using (Html.BeginCollectionItem("LineViewModels"))
    {
        <td>@Html.DropDownListFor(model => model.Selecteduserid, new SelectList(Model.users, "UserID", "FullName"), "--Select--", new { id = "Selecteduserid" })</td>
        <td>@Html.DropDownListFor(model => model.Selectedcatid, new SelectList(Model.categories, "CatID", "FullCat"), "--Select--", new { style = "width: 120px" })</td>
        <td>@Html.EditorFor(model => model.MeetingDate)</td>
        <td>@Html.TextBoxFor(model => model.Venue, new { @class = "smalltext" })</td>
        <td>@Html.DropDownListFor(model => model.Selectedrate, Enumerable.Empty<SelectListItem>(),"---select", new { id = "Selectedrate" })</td>
        <td>@Html.DropDownListFor(model => model.Selectedhours, new SelectList(new[] { "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8", "8.5", "9", "9.5", "10", "10.5", }))</td>  
        <td>@Html.EditorFor(model => model.Miles)</td>    
        <td>@Html.EditorFor(model => model.TravelCost)</td>
        <td>@Html.EditorFor(model => model.ParkingCost)</td>
        <td>@Html.TextBoxFor(model => model.Comments, new { @class = "bigtext" })</td>

        <td>
            <a href="#" class="deleteRow">delete</a>
        </td>


    }
</tr>

@model authentication.ViewModels.LineViewModel
@使用authentication.WebUI.Helpers
@使用（Html.BeginCollectionItem（“LineViewModels”））
{
@Html.DropDownListFor（model=>model.Selecteduserid，新建SelectList（model.users，“UserID”，“FullName”），“--Select--”，新建{id=“Selecteduserid”}）
@Html.DropDownListFor（model=>model.Selectedcatid，new-SelectList（model.categories，“CatID”，“FullCat”），“--Select--”，new{style=“width:120px”}）
@EditorFor（model=>model.MeetingDate）
@Html.TextBoxFor（model=>model.venture，新{@class=“smalltext”}）
@Html.DropDownListFor（model=>model.Selectedrate，Enumerable.Empty（），“--select”，new{id=“Selectedrate”}）
@DropDownListFor（model=>model.Selectedhours，新的选择列表（新的[]{“0.5”、“1”、“1.5”、“2.5”、“3”、“3.5”、“4”、“4.5”、“5”、“5.5”、“6”、“6.5”、“7.5”、“8”、“8.5”、“9”、“9.5”、“10”、“10.5”}））
@EditorFor（model=>model.Miles）
@Html.EditorFor（model=>model.TravelCost）
@Html.EditorFor（model=>model.ParkingCost）
@Html.TextBoxFor（model=>model.Comments，新的{@class=“bigtext”}）
}

添加行并在第一行上启用级联下拉的JS

$("#addItem").click(function () {
    $.ajax({
        url: '/Claims/BlankEditorRow',
        cache: false,
        //async: true,
        success: function (html) {
            $("#editorRows").append(html);
            $('#editorRows .date').datepicker({ dateFormat: "dd/mm/yy" });
            $('#Selecteduserid').change(function () {
                var Selecteduserid = $(this).val();
                if (Selecteduserid != null && Selecteduserid != '') {
                    $.getJSON('/Claims/Rates', { locId: Selecteduserid },
            function (rate) {

                var RateSelect = $('#Selectedrate');
                RateSelect.empty();
                $.each(rate, function (index, rate) {
                    RateSelect.append($('<option/>', {
                        value: rate.value,
                        text: rate.text
                    }));
                });
            });

                }
            });
        }
    });

    return false;
});

$（“#添加项”）。单击（函数（）{
$.ajax({
url:“/Claims/BlankEditorRow”，
cache:false，
//async:true，
成功：函数（html）{
$（“#editorRows”）.append（html）；
$（'#editorRows.date'）.datepicker（{dateFormat:“dd/mm/yy”}）；
$（'#Selecteduserid'）。更改（函数（）{
var Selecteduserid=$（this.val（）；
if（Selecteduserid！=null&&Selecteduserid！=''）{
$.getJSON（'/Claims/Rates'，{locId:Selecteduserid}，
功能（速率）{
var RateSelect=$（“#Selectedrate”）；
RateSelect.empty（）；
$。每个（速率、函数（索引、速率）{
RateSelect.append（$（''）{
值：rate.value，
text:rate.text
}));
});
});
}
});
}
});
返回false；
});

---

因此，我的问题是如何处理ID，使此代码能够工作？

我看不出您引用的代码对动态添加的行不起作用的任何原因。你有什么问题吗？谢谢，我在上面补充了更多关于我的问题的细节having@mattbloke-你有没有得到答案？我也有同样的问题。如果我发布了我的模型，当它重新显示时出现错误，则第二个级联下拉列表设置不正确。