JQuery Cascade下拉问题？

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

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

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

位置http://sofzh.miximages.com/jquery/1246819525-clip-2kb.png 位置http://sofzh.miximages.com/jquery/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代码：

  function commonMatch(selectedValue) { $("#selectedLocation").val(selectedValue); return this.When == selectedValue; }; function commonTemplate(item) { return "" + item.Name + ""; }; $(document).ready(function() { $("#chained_child").cascade("#Countries", { ajax: { url: '/locations/getChildren' }, template: commonTemplate, match: commonMatch }).bind("loaded.cascade", function(e, target) { $(this).prepend("------[%Select] Län------"); $(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("------[%Select] Kommun------"); $(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("------[%Select] Stad------"); $(this).find("option:first")[0].selected = true; }); }); 

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

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

为了防止没有选择值的Ajax请求，但是我遇到了问题，当我在第一个框中重置选择时，3d框并且波纹管不刷新： WTF？ http://sofzh.miximages.com/jquery/1246822534-clip-2kb.png

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

如果有人在里面工作，请告诉我也许我们可以一起找到解决方案。 谢谢你的建议……

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中填充它们。

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

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