JQuery的级联下拉的问题？ [英] JQuery Cascade dropdown problem?

问题描述

我使用基于JQuery的级联插件可能它的工作，但我发现很多与它的问题。

I'm using 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

这里说到我的CS code：

Here comes my CS code:

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 code：

Here comes my JS code:

<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);

要选择没有价值prevent Ajax请求，但我面对的问题，当我第一次在3D盒盒和波纹管不刷新复位选择：

To prevent Ajax request without selected value, but I faced with problem, when I reset selection in first box 3d box and bellow 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.

如果有人在让我知道，也许我们可以一起找到解决方案工作。
谢谢意见...

If somebody worked within let me know maybe we could together find solution. Thanks in advice...

推荐答案

与原来的插件code中的问题是，它操纵的下拉后不火的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

code： http://jsbin.com/unope/edit

让我来解释我做了什么。我已经创建了一个名为依赖的插件，它可以让你联想的依赖性下降了。

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
                        });

以上code表明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.

请这code是不通用的，我很快写来演示这一概念。你将不得不调整它进一步实现你想要的结果。

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的级联下拉的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！