[英]How do I change the options from a dropdownlist based on the selected value from another dropdownlist using ajax?
I'm using ajax to change the options from a dropdownlist with a change event after a user selects an option from a separate dropdownlist and it isn't changing the options at all. 在用户从单独的下拉列表中选择一个选项之后,我正在使用ajax通过一个change事件更改下拉列表中的选项,而根本没有更改任何选项。 Here is my ajax code which seems to work fine.
这是我的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");
}
});
});
Here is the code for the method that I'm calling with the ajax code 这是我用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;
}
}
If you are using WebForms ,then you should use Cascaded DropDownList of Asp.net AJAX Control Toolkit : 如果使用WebForms ,则应使用Asp.net AJAX控件工具包的 Cascaded DropDownList :
http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx
Updated: 更新:
if you are working in asp.net mvc , you can implement cascaded drop down list this way: 如果您使用的是asp.net mvc ,则可以通过以下方式实现级联下拉列表:
http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net-mvc.aspx http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net-mvc.aspx
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.