0

我有三个下拉列表。

$(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>
4

3 回答 3

1

使用 jQuery .on()

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

重复您的下拉菜单 3

于 2013-05-08T13:38:05.647 回答
0

由于 DropDownList2 和 DropDownList3 是动态添加的，因此您需要这样做：

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

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

于 2013-05-08T13:37:39.377 回答
0

如果要动态添加选择选项，为什么不在 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 ( return Json(object) )，然后以编程方式在您的 javascript 中创建元素。您必须将 $.ajax 中的数据类型切换为“json”。

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

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

于 2013-05-08T21:24:42.290 回答