JQuery Cascade 插件下拉列表不刷新

Question

我正在使用基于 JQuery Cascade plugin ;也许它可以工作，但我发现它有很多问题。

也许有人已经遇到过这个插件，也许可以提供帮助。

所以，我使用这个插件进行位置过滤

http://clip2net.com/clip/m12007/1246819525-clip-2kb.png ( splinter 的图像)

这是我的 CS 代码:

public JsonResult getChildren(string val)
    {
        if (val.IsNotNull())
        {
            int lId = val.ToInt();
            Cookie.Location = val.ToInt();
            var forJSON = from h in Location.SubLocationsLoaded(val.ToInt())
                          select new { When = val, Id = h.Id, Name = h.Name, LocationName = h.LocationType.Name };
            return this.Json(forJSON.ToArray());
        }
        else
            return null;
    }

这是我的 JS 代码:

<script type="text/javascript">
function commonMatch(selectedValue) {
    $("#selectedLocation").val(selectedValue);
    return this.When == selectedValue;
};
function commonTemplate(item) {
    return "<option value='" + item.Id + "'>" + item.Name + "</option>";
};


$(document).ready(function() {
    $("#chained_child").cascade("#Countries", {
        ajax: {
            url: '/locations/getChildren'
        },
        template: commonTemplate,
        match: commonMatch
    }).bind("loaded.cascade", function(e, target) {
        $(this).prepend("<option value='empty' selected='true'>------[%Select] Län------</option>");
        $(this).find("option:first")[0].selected = true;
    });
    $("#chained_sub_child").cascade("#chained_child", {
        ajax: {
            url: '/locations/getChildren'
        },
        template: commonTemplate,
        match: commonMatch
    }).bind("loaded.cascade", function(e, target) {
        $(this).prepend("<option value='empty' selected='true'>------[%Select] Kommun------</option>");
        $(this).find("option:first")[0].selected = true;
    });
    $("#chained_sub_sub_child").cascade("#chained_sub_child", {
        ajax: {
            url: '/locations/getChildren'
        },
        template: commonTemplate,
        match: commonMatch
    }).bind("loaded.cascade", function(e, target) {
        $(this).prepend("<option value='empty' selected='true'>------[%Select] Stad------</option>");
        $(this).find("option:first")[0].selected = true;

    });

});

我向 jquery.cascade.ext.js 添加了一个条件

if (opt.getParentValue(parent) != "empty")
            $.ajax(_ajax);

为了防止没有选定值的 Ajax 请求，但我遇到了问题，当我重置第一个框 3d 框中的选择时，下面的内容不会刷新:

第二期:我想知道在哪里注入(inject)我自己的函数的最佳位置，该函数可以做一些事情，有一个要求 - 我需要知道所有盒子都完成了工作。

Answer 1

原始插件代码的问题是它在操作下拉列表后不会触发更改事件。

此外，我喜欢从“依赖”而不是“级联”的角度来思考这个问题。我尝试创建一个简单的插件和一个演示页面来展示整个事情是如何工作的。

演示:http://jsbin.com/unope

代码:http://jsbin.com/unope/edit

让我解释一下我做了什么。我创建了名为“dependent”的插件，它可以让您关联下拉菜单的依赖关系。

例如

$('#dropDown2').dependent({ 
                            dependency : 'dropDown1',
                            values : getValues
                        });

上面的代码表明 dropDown2 依赖于 dropDown1，因此每当 dropDown1 值发生变化时，它都会调用您的 getValues 函数(将其传递给 dropDown1)。您应该从 getValues 函数返回相关值，它会将它们填充到 dropDown2 中。

请记住，这段代码不是通用的，我很快就编写了它来演示这个概念。您必须进一步调整它才能达到您想要的结果。

如果您有任何疑问，请告诉我。