在 Ajax.BeginForm 提交后,dropdownlist 级联 Change() 不会立即触发。
生成新 DropDownList 的 View :
@model Heelp.ViewModels.CreateAdCategoryTypeViewModel
@using (Ajax.BeginForm(MVC.Ad.CreateAd(), new AjaxOptions { UpdateTargetId = "ad", InsertionMode = InsertionMode.Replace }, new { @id = "categoryTypeForm" }))
{
@Html.HiddenFor(m => m.Category_Id)
@Html.DisplayNameFor(m => m.CategoryType_Id)
@Html.DropDownListFor(m => m.CategoryType_Id, Model.CategoryList, HeelpResources.DropdownlistCategoryFirstRecord)
@Html.ValidationMessageFor(m => m.CategoryType_Id)
}
一次sumbit后,生成的View为:
@model Heelp.ViewModels.CreateAdCarViewModel
@using (Html.BeginForm()) {
<fieldset>
<legend>Car</legend>
<div id="makes">
@Html.DisplayNameFor(m => m.Make_Id)
@Html.DropDownListFor(m => m.Make_Id, Model.MakeList, HeelpResources.DropdownlistMakeFirstRecord)
@Html.ValidationMessageFor(m => m.Make_Id)
</div>
<div id="models">
@Html.DisplayNameFor(m => m.Model_Id)
@Html.DropDownListFor(m => m.Model_Id, Model.ModelList)
@Html.ValidationMessageFor(m => m.Model_Id)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
此时,当进行更改以填充模型列表时,我有一个级联函数可以触发:
$(document).ready(function () {
$(document).on("change", "#Make_Id", function () {
$('#Make_Id').cascade({
source: "/Ad/ListModelByMake",
cascaded: "Model_Id"
});
});
});
级联函数:
// Cascade function
(function ($) {
$.fn.cascade = function (options) {
var defaults = {};
var opts = $.extend(defaults, options);
return this.each(function () {
$(this).change(function () {
var selectedValue = $(this).val();
var params = {};
params[opts.paramName] = selectedValue;
$.post(opts.url, params, function (items) {
//$.getJSON(opts.url, params, function (items) {
opts.childSelect.empty();
if (opts.firstOption != "")
opts.childSelect.append(
$('<option/>')
.attr('value', '-1')
.text(opts.firstOption));
$.each(items, function (index, item) {
// alert(opts.firstOption);
opts.childSelect.append(
$('<option/>')
.attr('value', item.Id)
.text(item.Name)
);
});
});
});
});
};
})(jQuery);
不幸的是,它只有在对“Makes Dropdownlist”进行第二次更改后才有效,有什么想法吗?
谢谢。
最佳答案
不要使用更改处理程序来启动插件。插件代码将更改处理程序绑定(bind)到元素。
由于您在更改处理程序中调用插件,因此直到下一次选择更改时,插件的更改处理程序才会触发,因为初始更改事件已经发生。
将代码更改为:
$(document).ready(function () {
$('#Make_Id').cascade({
source: "/Ad/ListModelByMake",
cascaded: "Model_Id"
});
});
关于javascript - JQuery Cascade 函数在更改事件后不会立即触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14150205/