如何使用ajax根据从另一个下拉列表中选择的值更改下拉列表中的选项

How do I change the options from a dropdownlist based on the selected value from another dropdownlist using ajax?

本文关键字:下拉列表 何使用 选项 选择 ajax 另一个      更新时间:2023-09-26

在用户从单独的下拉列表中选择一个选项后,我使用ajax通过更改事件更改下拉列表中的选项,而它根本没有更改选项。这是我的ajax代码,它似乎工作得很好。

$(document).ready(function () {
        // if user changes paper type
        $('#paperTypeJList').change(function () {
            var modelData = {
                paperType: $("#paperTypeJList").val(),
                urgency: $("#urgencyJList").val(),
                numOfPages: $("#numOfPagesJList").val()
            };
            $.ajax({
                url: '@Url.Action("changeDropDownValues", "Home")',
                type: "GET",
                data: {paperType:modelData.paperType},
                cache: false,
                async: true,
                success: function (response) {
                    alert("Success");
                }
            });
    });

以下是我用ajax代码调用的方法的代码

public void changeDropDownValues(string paperType)
    {
        List<SelectListItem> urgencyList1 = new List<SelectListItem>();
        urgencyList1.Add(new SelectListItem() { Text = "Select the Urgency", Value = "", Selected = true });
        urgencyList1.Add(new SelectListItem() { Text = "60 Days", Value = "60", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "30 Days", Value = "30", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "20 Days", Value = "20", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "10 Days", Value = "10", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "7 Days", Value = "7", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "5 Days", Value = "5", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "4 Days", Value = "4", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "72 Hours", Value = "72", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "48 Hours", Value = "48", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "24 Hours", Value = "24", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "12 Hours", Value = "12", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "6 Hours", Value = "6", Selected = false });
        urgencyList1.Add(new SelectListItem() { Text = "3 Hours", Value = "3", Selected = false });
        List<SelectListItem> urgencyList2 = new List<SelectListItem>();
        urgencyList2.Add(new SelectListItem() { Text = "Select the Urgency", Value = "", Selected = true });
        urgencyList2.Add(new SelectListItem() { Text = "10 Days", Value = "10", Selected = false });
        urgencyList2.Add(new SelectListItem() { Text = "7 Days", Value = "7", Selected = false });
        urgencyList2.Add(new SelectListItem() { Text = "5 Days", Value = "5", Selected = false });
        urgencyList2.Add(new SelectListItem() { Text = "4 Days", Value = "4", Selected = false });
        urgencyList2.Add(new SelectListItem() { Text = "72 Hours", Value = "72", Selected = false });
        urgencyList2.Add(new SelectListItem() { Text = "48 Hours", Value = "48", Selected = false });
        urgencyList2.Add(new SelectListItem() { Text = "24 Hours", Value = "24", Selected = false });
        urgencyList2.Add(new SelectListItem() { Text = "12 Hours", Value = "12", Selected = false });
        urgencyList2.Add(new SelectListItem() { Text = "6 Hours", Value = "6", Selected = false });
        urgencyList2.Add(new SelectListItem() { Text = "3 Hours", Value = "3", Selected = false });
        switch (paperType)
        {
            case "Dissertation":
                ViewBag.urgency = new SelectList(urgencyList1, "Value", "Text");
                break;
            case "Research Proposal":
                ViewBag.urgency = new SelectList(urgencyList1, "Value", "Text");
                break;
            default:
                ViewBag.urgency = new SelectList(urgencyList2, "Value", "Text");
                break;
        }
    }

如果您正在使用WebForms,那么您应该使用Asp.netAJAX控制工具包的Cascaded DropDownList

http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx

这是教程

更新:

如果您使用asp.net mvc,您可以通过以下方式实现级联下拉列表:

http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net-mvc.aspx

相关文章: