在我的所有代码之下,
* 型号*
以下是型号代码,
public class MyViewModel
{
public int? Year { get; set; }
public int? Month { get; set; }
public IEnumerable<SelectListItem> Years
{
get
{
return Enumerable.Range(2000, 12).Select(x => new SelectListItem
{
Value = x.ToString(),
Text = x.ToString()
});
}
}
}
控制器
以下是控制器代码,
//
// GET: /MenuSix/
public ActionResult Index()
{
var model = new MyViewModel();
return View(model);
}
public ActionResult Months(int year)
{
if (year == 2011)
{
return Json(
Enumerable.Range(1, 3).Select(x => new { value = x, text = x }),
JsonRequestBehavior.AllowGet
);
}
return Json(
Enumerable.Range(1, 12).Select(x => new { value = x, text = x }),
JsonRequestBehavior.AllowGet
);
}
查看
以下是查看代码,
@model DemoWeb.Models.MenuSix.MyViewModel
@using (Html.BeginForm())
{
@Html.DropDownListFor(
x => x.Year,
new SelectList(Model.Years, "Value", "Text"),
"-- select year --"
)
@Html.DropDownListFor(
x => x.Month,
Enumerable.Empty<SelectListItem>(),
"-- select month --"
)
}
@section PageScriptsAndCSS{
<script type="text/javascript">
$('#Year').change(function () {
debugger;
var selectedYear = $(this).val();
if (selectedYear != null && selectedYear != '') {
$.getJSON('@Url.Action("Months")', { year: selectedYear },
function (months) {
var monthsSelect = $('#Month');
monthsSelect.empty();
$.each(months, function (index, month) {
monthsSelect.append($('<option/>', {
value: month.value,
text: month.text
}));
});
});
}
});
</script>
}
我正在测试上面的代码,但是在这里没有调用的jquery代码中,请说明为什么在jquery中没有调用下拉更改事件?
答案 0 :(得分:1)
在document.ready中包装javascript代码,以确保在绑定then event时控件可用。 IT看起来这个javascript呈现在头部,此时下拉列表尚未添加到DOM
$(document).ready(function()
{ $(“#year”)。//其余代码 });