Question

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

以下链接中的代码有效，因为我们知道只有一个SelectedLocation。然而在我的地方会有＆gt; = 1（因为用户可以添加他们喜欢的行数。）

有什么想法吗？

感谢。

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

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

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

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;
});

所以我的问题是如何处理ID以使此代码有效？

动态添加行的级联下拉列表

0 个答案: