JQuery Cascade插件下拉列表不刷新

Question

我正在使用基于 JQuery 的 Cascade plugin；可能它正在工作，但我发现它有很多问题。

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

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

http://clip2net.com/clip/m12007/1246819525-clip-2kb.png（损坏的图像）

我的 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 框和下面的框中重置选择时不会刷新：

第二个问题： 我想知道在哪里注入我自己的函数的最佳位置，它会做某事，有一个要求 - 我需要知道所有盒子都完成了工作。

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 中。

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

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