如何使用ajax根据从另一个下拉列表中选择的值更改下拉列表中的选项
How do I change the options from a dropdownlist based on the selected value from another dropdownlist using ajax?
在用户从单独的下拉列表中选择一个选项后,我使用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
相关文章:
- 如何使用jQuery选择下拉列表的值
- 如何使用PHP和JS级联三个下拉列表
- 如何在使用剑道 MVVM 下拉列表时强制选择第一项
- 下拉列表在使用z索引放置在前面后停止工作
- 可以将单元格编辑为下拉列表并使用 JQGard 进行多选
- dynamic制作的下拉列表,当我选择任何列表时,如何在每个下拉列表上使用活动类
- 如何获得Materialize select下拉列表以使用React
- 使jQuery选择的插件与动态添加的下拉列表一起使用
- 如何创建语言选择下拉列表仅使用无序列表
- 如何使用单选按钮禁用下拉列表中的选项,所有这些都在同一个下拉列表中.使用Javascript
- 甚至在选择下拉列表中使用.change来筛选结果
- 从Javascript数组加载下拉列表并使用angularjs设置选定值的最简单方法
- 在 php 的动态下拉列表中使用 ajax 时找不到
- 下拉列表格式使用CSS
- 如何设置下拉列表的格式,根据第一个下拉列表仅使用选定的答案
- 下拉列表过滤器使用jquery或javascript
- AngularJs下拉列表中使用ng-repeat
- 如何访问动态创建的
- 如何在刷新整个页面后清除下拉列表框.使用asp.net mvc
- Codeigniter Dependant 下拉列表,使用 XMLhttp 时出现问题