Question

我有三个下拉列表。

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

生成的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>

Answer 1

使用jQuery .on()

$(document).on('change', "#DropDownList2", function(){your code})

重复下拉3

Answer 2

因为DropDownList 2 n DropDownList 3是动态添加的，所以你需要这样做：

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

同样也可以调用其他动态添加的下拉菜单。

Answer 3

如果要动态添加选项，为什么不在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（返回Json（对象））的形式返回一个对象，然后以编程方式在javascript中创建元素。您必须将$ .ajax中的dataType切换为'json'。

这样，您在加载选项后就会有下拉列表更改事件。此更改事件加载DropDownList2的选项和更改事件，这将加载DDL3的选项。

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

没有在mvc3中获得动态添加下拉列表的onchange事件

3 个答案: