1

我正在使用 Razor 语法开发 MVC3 应用程序，但我在使用 AJAX 时遇到了一些问题。

问题如下：我有一个DropDownList这样定义的类别：

 @Html.DropDownList("category_1", 
                 new   SelectList(LocalRuckusMVC.Code.StaticDictionaries.BusinessCategories,                                      
   "Value", "Text"), "Please Select A Category")

当用户选择一个类别时，应用程序向服务器发出 AJAX 请求，以获取所选类别的适当子类别列表。

jquery 的设置如下：

$('#category_1').change(function () {
    $('#category_1').cascade({
        url: '@Url.Action("GetSubCats")',
        paramName: 'category_id',
        childSelect: $("#subCategory_1")
    });
});

和级联 jquery 扩展：

    (function (jQuery) {
    $.fn.cascade = function (options) {
        var defaults = {};
        var opts = $.extend(defaults, options);

        return this.each(function () {
            jQuery(this).change(function () {
                var selectedValue = jQuery(this).val();
                var params = {};
                params[opts.paramName] = selectedValue;
                jQuery.getJSON(opts.url, params, function (items) {
                    var options = opts.childSelect.options;

                    opts.childSelect.empty();
                    window.console.log(params);
                    window.console.log(items);
                    jQuery.each(items, function (index, item) {
                        //window.console.log(index);
                        window.console.log(opts.childSelect);
                        window.console.log(item.Value);

                        var html = '<option value=\'' + item.Value + '\' >' + item.Text +    
                                     '</option>';
                        opts.childSelect.append(html);
                        window.console.log(html);


                    });
                });
            });
        });
    };
})(jQuery);

就 AJAX 而言，一切正常，我得到了正确的响应，问题是用户必须在发出 AJAX 请求之前两次选择不同的类别。

我已经使用 firebug 和 fiddler 进行了广泛的调试，并且在第一次选择类别时不会触发 change 事件，或者至少在查看 firebug 或 chrome 开发控制台时它似乎不会触发。

有人有什么想法吗？？

非常感谢所有帮助。

糟糕，忘记添加此 jquery 方法更新的 html 选择，所以这里是：

 <select id="subCategory_1" name="subCategory_1">
                </select>
4

1 回答 1

0

啊哈，我认为这是因为您在现有更改事件之上定义了另一个 jQuery(this).change 事件。

这是原始的更改事件

$('#category_1').change(function () {

然后在您拥有的辅助函数中

jQuery(this).change(function () {

我认为这是断言；仅在其更改并且选择未再次更改以触发该代码时才运行以下代码。

试试下面的修订版。

$.fn.cascade = function (options) {
    var defaults = {};
    var opts = $.extend(defaults, options);

    return this.each(function () {
            var selectedValue = jQuery(this).val();
            var params = {};
            params[opts.paramName] = selectedValue;
            jQuery.getJSON(opts.url, params, function (items) {
                opts.childSelect.empty();
                window.console.log(params);
                window.console.log(items);
                jQuery.each(items, function (index, item) {
                    //window.console.log(index);
                    window.console.log(opts.childSelect);
                    window.console.log(item.Value);

                    var html = '<option value=\'' + item.Value + '\' >' + item.Text +
                                     '</option>';
                    opts.childSelect.append(html);
                    window.console.log(html);
                });
            });

    });
};

在你的代码中你也有

var options = opts.childSelect.options;

this 与 the 同名function(options)，变量未使用！！所以我把它拿出来:-)我已经测试过它，它在第一次选择时对我有用，希望它有所帮助。

于 2012-04-04T02:39:23.820 回答