jQuery Cascade插件下拉列表不刷新 [英] JQuery Cascade plugin dropdown does not refresh
问题描述
I'm using the JQuery based Cascade plugin; probably it's working, but I found a lot of problems with it.
也许有人已经遇到了这个插件，也许可以提供帮助.
Maybe somebody already faced with this plugin and maybe could help.
因此，我使用此插件进行位置过滤
So, I using this plugin for location filtration
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添加了一个条件
I added one condition to jquery.cascade.ext.js
if (opt.getParentValue(parent) != "empty")
$.ajax(_ajax);
为防止Ajax请求没有选择的值，但我遇到问题，当我在第一个框3d框及以下框中重置选择时不会刷新:
To prevent Ajax request without selected value, but I faced with problem, when I reset selection in first box 3d box and below does not refresh:
第二个问题: 我想知道最好的地方是在哪里注入我自己的函数，该函数可以完成某项工作，而且有一个要求-我需要知道所有盒子都可以完成工作.
And second issue: I would like to know where is best place to inject my own function that will do something, with one requirement - I need to know that all boxes finished work.
推荐答案
原始插件代码的问题在于，它在操作下拉菜单后不会触发change事件.
The problem with the original plugin code is that it doesn't fire the change event after it manipulates the dropdown.
我还想从依赖"而不是级联"的角度来考虑这个问题.我试图创建一个简单的插件和一个演示页面，以演示整个过程.
Also, I like to think of this problem in terms of 'dependency' and not 'cascading'. I have tried to create a simple plugin and a demo page which shows how the whole thing works.
代码: http://jsbin.com/unope/edit
让我解释一下我做了什么.我创建了名为"Dependent"的插件，该插件可让您将依赖项关联起来.
Let me explain what I have done. I have created the plugin named 'dependent' which lets you associate dependency for a drop down.
例如
$('#dropDown2').dependent({
dependency : 'dropDown1',
values : getValues
});
以上代码建议dropDown2依赖于dropDown1，因此，只要dropDown1值发生变化，它将调用您的getValues函数(将其传递给dropDown1).您应该从getValues函数返回相关值，它将在dropDown2中填充它们.
Above code suggests that dropDown2 is dependent on dropDown1, so whenever dropDown1 value changes, it will call your getValues function (passing it dropDown1). You should return relevant values from your getValues function and it will populate them in dropDown2.
请记住，此代码不是通用代码，我迅速编写了该代码以演示该概念.您将不得不对其进行进一步调整，以实现所需的结果.
Keep in mind that this code is not generic, I have quickly wrote it to demonstrate the concept. You will have to tweak it further to achieve your desired result.
如果您有任何疑问，请告诉我.
Let me know if you have any questions.
这篇关于jQuery Cascade插件下拉列表不刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
