在级联MVC下拉列表中设置选定值

时间:2014-11-21 11:56:18

标签: jquery ajax asp.net-mvc cascadingdropdown

我正在开发一个MVC 5应用程序。在Razor View中有两个下拉列表。当从第一个值( productID )中选择一个值时,将进行JQuery和Ajax调用以返回填充第二个下拉列表的Json Data( additionalID )。 / p>

放弃下降

@Html.DropDownListFor(m => m.productID, Model.ProductList, "Select", new { @class = "form-control" })
@Html.DropDownListFor(m => m.additionalID, Enumerable.Empty<SelectListItem>(), "Select", new { @class = "form-control" })

JQuery的

$("#productID").change(ProductChange);

function ProductChange() {
        var val = $("#productID").val();
        var valText = $("#productID option:selected").text();
        if (val == 22 || val == 25 || val == 29 || val == 20) 
        {
            $('#AdditionalProducts').show('fast');
            $('label[for="additionalID"]').html('Please select a ' + valText + ' option');

            var dataPost = { productID: val };
            $.ajax({
                type: "POST",
                url: '/Proposal/GetAdditionalProducts/',
                async: false, //This makes the JQuery below wait until $.ajax() call is finished
                data: dataPost,
                dataType: "json",
                error: function () {
                    alert("An error occurred." + val);
                },
                success: function (data) {
                    var items = "";
                    $.each(data, function (i, item) {
                        items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                    });

                    $("#additionalID").html(items);
                }
            });    
        }
        else
        {
            $('#additionalID').empty(); // clear drop down list
            $('#AdditionalProducts').hide('fast');
        }
    }

编辑记录时,在MVC控制器编辑操作中,我将 productID additionalID 的值传递给Razor View。将显示两个下拉列表,并设置productID的选定值,但不会设置additionalID的选定值。

有人可以帮我解释如何设置第二个下拉列表的值吗?

提前致谢。

0 个答案:

没有答案