Question

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

也许有人已经面对这个插件，也许可以提供帮助。

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

location http://clip2net.com/clip/m12007/1246819525-clip-2kb.png location http://clip2net.com/clip/m12007/1246819608-clip-3kb.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请求，但是我遇到了问题，当我在第一个框中重置选择框时，并且波纹管不刷新： WTF? http://clip2net.com/clip/m12007/1246822534-clip-2kb.png

第二期：我想知道哪里是注入我自己的功能的最佳位置，有一个要求 - 我需要知道所有的盒子都完成了工作。

如果有人在我的工作中让我知道也许我们可以一起找到解决方案。谢谢你的建议...

Answer 1

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

另外，我喜欢从'依赖'而不是'级联'来考虑这个问题。我试图创建一个简单的插件和一个演示页面，显示整个过程是如何工作的。

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

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

让我解释一下我做了什么。我创建了名为“dependent”的插件，它允许您将下拉列表与依赖关联起来。

e.g。

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

上面的代码表明dropDown2依赖于dropDown1，所以每当dropDown1值改变时，它都会调用你的getValues函数（传递给它dropDown1）。您应该从getValues函数返回相关值，它将在dropDown2中填充它们。

请记住，此代码不是通用的，我已经快速编写它来演示这个概念。您将不得不进一步调整以获得所需的结果。

如果您有任何疑问，请与我们联系。

JQuery Cascade下拉问题？

1 个答案: