Javascript 未获取mvc3中动态添加下拉列表的onchange事件

我有三个下拉列表

$(document).ready(function () {
        $("#DropDownList1").change(function () {
            $("#Id1").val($(this).val());
            $("#Name1").val($("#DropDownList1 option:selected").text());
            $('#Div1').load('/Account/Dropdown2/?Id1=' + $("#Id1").val());

        });
        $("#DropDownList2").change(function () {
            $("#routeId").val($(this).val());
            $("#routeName").val($("#RouteDropDownList option:selected").text());
            $('#Div2').load('/Account/Dropdown3/?Id2=' + $("#routeId").val());


        });
        $("#DropDownList3").change(function () {
            $("#Id3").val($(this).val());
            $("#Name3").val($("#DropDownList3 option:selected").text());


        });
    });

在此DropDownList2和DropDownList3中动态添加。问题是动态添加的下拉列表未在页面中注册。因此，我没有从onchange事件中获取其选定值。我将这些控件添加为部分视图。 控制器

public ActionResult DropDownList2 (string Id1)
        {
            List<Emp> empList = new List<Emp>();
            Emp em= new Emp ()
            {
                Id = "1",
                Name = "Doac"
            };            
            empList .Add(em);            
            ViewBag.DropDownList2= new SelectList(empList , "Id", "Name");
            return PartialView();
        }

public ActionResult DropDownList2（字符串Id1）
{
List empList=新列表（）；
Emp em=新的Emp（）
{
Id=“1”，
Name=“Doac”
};            
添加（em）；
ViewBag.DropDownList2=新的选择列表（员工列表，“Id”，“姓名”）；
返回PartialView（）；
}

生成的Html

<script type="text/javascript">
    $('#CreateSubscriber').removeClass('menuHolderli').addClass('selectedMenu');
    $(document).ready(function () {
        $("#DropDownList").change(function () {
            $("#Organization_Id").val($(this).val());
            $("#Organization_Name").val($("#DropDownList option:selected").text());
            $('#routeDiv').load('/Account/RouteDropdown/?organizationId=' + $("#Organization_Id").val());

        });
        $(document).on('change', "#RouteDropDownList", function () {
            alert("hi");
            $("#routeId").val($(this).val());
            $("#routeName").val($("#RouteDropDownList option:selected").text());
            $('#locationDiv').load('/Account/LocationDropdown/?routeId=' + $("#routeId").val());

        });
        $("#LocationDropDownList").change(function () {
            $("#locationId").val($(this).val());
            $("#locationName").val($("#LocationDropDownList option:selected").text());


        });
    });
</script>
<p class="message-info">
    Passwords are required to be a minimum of 6 characters in length.
</p>

<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

<form action="/Account/Register" method="post">    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li>

                <label for="Organization_Name">Name</label>
                <input id="Organization_Id" name="Organization.Id" type="hidden" value="" />
                <input id="Organization_Name" name="Organization.Name" type="hidden" value="" />

                <select id="DropDownList" name="DropDownList"><option value="">---Select---</option>
<option value="516c0a18c891870f107aa74a">Choice School</option>
<option value="516d277bc8918701a44c131e">New Org</option>
<option value="516d1f492e6bba07dc245cc7">Olive</option>
</select>
                <span class="field-validation-valid" data-valmsg-for="Organization.Name" data-valmsg-replace="true"></span>
            </li>
        </ol>

        <div id="routeDiv"></div>
        <div id="locationDiv"></div>

$（'CreateSubscriber'）.removeClass（'menuHolderli'）.addClass（'selectedMenu'）；
$（文档）.ready（函数（）{
$（“#DropDownList”）.change（函数（）{
$（“#组织_Id”）.val（$（this.val（））；
$（“#组织机构名称”）.val（$（“#下拉列表选项：选中”）.text（）；
$（'#routeDiv'）.load（'/Account/routeddropdown/？organizationId='+$（“#Organization_Id”）.val（））；
});
$（文档）.on（'change'，“#RouteDropDownList”，函数（）{
警报（“hi”）；
$（“#routeId”）.val（$（this.val（））；
$（“#routeName”）.val（$（“#RouteDropDownList选项：选定”）.text（））；
$（'#locationDiv'）.load（'/Account/LocationDropdown/？routeId='+$（“#routeId”）.val（））；
});
$（“#LocationDropDownList”）。更改（函数（）{
$（“#locationId”）.val（$（this.val（））；
$（“#locationName”）.val（$（“#LocationDropDownList选项：选定”）.text（））；
});
});

密码长度要求至少为6个字符。

登记表

名称
---挑选---
选择学校
新组织
橄榄树

由于动态添加了DropDownList2和DropDownList3，因此需要执行以下操作：

$(document).on('change', '#DropDownList1', (function () {
    $("#Id1").val($(this).val());
    $("#Name1").val($("#DropDownList1 option:selected").text());
    $('#Div1').load('/Account/Dropdown2/?Id1=' + $("#Id1").val());
});

同样，也可以调用其他动态添加的下拉列表。

使用jQuery

---

如果要动态添加选择选项，为什么不在AJAX中使用AJAX呢

$(function() {
    $('#DropDownList').each(function () {
        var dropdown = $(this);

        dropdown.change(function() {
            $.ajax({
                url: 'Account/GetDropDownOptions',
                type: 'GET',
                data: {dropdownID: dropdown.attr('id'), value: dropdown.val()},
                dataType: 'html',
                cache: false,
                success: function (data) {
                    var dropdown2 = $('#DropDownList2');
                    dropdown2.html(data);

                    dropdown2.change(function() {
                        $.ajax({
                            url: 'Account/GetDropDownOptions',
                            type: 'GET',
                            data: {dropdownID: dropdown2.attr('id'), value: dropdown2.val()},
                            dataType: 'html',
                            cache: false,
                            success: function (data) {
                                var dropdown3 = $('#DropDownList3');
                                dropdown3.html(data);

                                dropdown3.change(function() {
                                    //....same thing as above pretty much
                                });
                            }
                        });
                    });
                }
            });
        });
    });
});

然后，您的控制器操作GetDropDownOptions将检查DDL ID和所选值，了解它需要哪些选项，然后以HTML形式返回这些选项。或者作为一个更优雅的解决方案，您可以让它以json（returnJSON（object））的形式返回一个对象，然后通过编程在javascript中创建元素。您必须将$.ajax中的数据类型切换为“json”

这样，在加载选项后，您就有了下拉更改事件。此更改事件加载DropDownlost2的选项和更改事件，后者将加载DDL3的选项

---

我还没有测试过代码，但这个想法会奏效。本示例假设您已经加载了第一个DDL选项，但似乎还需要添加另一层ajax来加载这些选项。它还假定和DDL3在页面加载时已经在DOM上。您可以将它们添加到html中的DOM中，以使此示例正常工作，或者将javascript中的ID更改为某个容器。

该事件也不会触发。在页面源代码中，动态添加的下拉列表不会显示。

。on（）

绑定假定对动态添加的元素起作用，控制台日志中是否有任何错误？它没有显示任何错误。但在页面源中，“Div1”显示为空。如果在函数的第一行上放置警报，警报是否会触发？否，它没有显示警报$在（'change'，“#DropDownList2”，function（）{alerrt（“hi”）；$（“#routeId”）.val（$（this.val（））；

$(function() {
    $('#DropDownList').each(function () {
        var dropdown = $(this);

        dropdown.change(function() {
            $.ajax({
                url: 'Account/GetDropDownOptions',
                type: 'GET',
                data: {dropdownID: dropdown.attr('id'), value: dropdown.val()},
                dataType: 'html',
                cache: false,
                success: function (data) {
                    var dropdown2 = $('#DropDownList2');
                    dropdown2.html(data);

                    dropdown2.change(function() {
                        $.ajax({
                            url: 'Account/GetDropDownOptions',
                            type: 'GET',
                            data: {dropdownID: dropdown2.attr('id'), value: dropdown2.val()},
                            dataType: 'html',
                            cache: false,
                            success: function (data) {
                                var dropdown3 = $('#DropDownList3');
                                dropdown3.html(data);

                                dropdown3.change(function() {
                                    //....same thing as above pretty much
                                });
                            }
                        });
                    });
                }
            });
        });
    });
});