We have a requirement that has had me skimming the web for quite sometime now. Here is the problem scenario. We have a web-page and the page here contains three drop-downs as shown in the picture below (Dummy fields - but the actual business data is also on the same lines)
我们有一个要求,让我现在浏览网页很长一段时间。这是问题场景。我们有一个网页,这里的页面包含三个下拉菜单,如下图所示(虚拟字段 - 但实际的业务数据也在同一行)
Here, we have three drop downs with the data being populated dynamically based on the selections in the other two. Let me give you an example. Whenever a person clicks on a drop-down button - the values for the drop-down should be dynamically generated using the values selected in the other two drop-downs. See the below scenarios:
在这里,我们有三个下拉列表,数据根据其他两个中的选择动态填充。让我给你举个例子。每当有人点击下拉按钮时 - 下拉列表的值应使用在其他两个下拉菜单中选择的值动态生成。请参阅以下方案:
If someone has a pre selected "Honda" in the first drop-down and he clicks on the 'Milage" drop down - the 'Milage' drop-down should:
a. clear previous options (if any)
b. populate the options dynamically for all the milages valid for 'Honda' (as per the DB)
c. show the drop-down with the new options.
如果有人在第一个下拉菜单中预先选择了“Honda”并点击了“Milage”下拉菜单 - 那么'Milage'下拉菜单应该:a。清除之前的选项(如果有的话)b。动态填充选项对于所有对'Honda'有效的milages(根据数据库)c。显示下拉列表中的新选项。
Also, the flow should work irrespective of any order of the drop-downs being selected.
此外,无论选择下拉顺序如何,流程都应该起作用。
This is where I am having issues - if I write the 'OnClick' handler for the drop down and use an AJAX call to get the values - the drop down values are populated but on IE - the drop-down collapses again. Also, in Firefox the options are populated ok - but the drop-down is kind of too animated (understandably so as I delete all the options and add the new ones).
这就是我遇到问题的地方 - 如果我为下拉列表编写'OnClick'处理程序并使用AJAX调用来获取值 - 下拉值将填充但在IE上 - 下拉列表再次崩溃。此外,在Firefox中可以选择填充选项 - 但下拉菜单有点过于动画(可以理解的是,因为我删除了所有选项并添加了新选项)。
Also, it would be great if the whole filteration thing can be handled on teh browser (as the AJAX calls take some time)
而且,如果可以在浏览器上处理整个过滤事件(因为AJAX调用需要一些时间),那将是很好的
Here is the image if you can't see it in the original post above - http://www.imagechicken.com/uploads/1241831231099054800.jpg
Regards,
- Ashish
问候, - Ashish
2 个解决方案
#1
Your problem is that you are updating the drop down content when the user clicks on it. It is better to update the drop down when the related drop down is changed. For example:
您的问题是,当用户点击它时,您正在更新下拉内容。最好在相关下拉列表更改时更新下拉列表。例如:
$('#drop1').change(function(){
$('#drop2').load(url, {option: $('#drop1').val()})
})
#2
A polling solution or an onchange solution as described by @Nadia is likely your best bet here.
@Nadia描述的轮询解决方案或onchange解决方案可能是您最好的选择。
#1
Your problem is that you are updating the drop down content when the user clicks on it. It is better to update the drop down when the related drop down is changed. For example:
您的问题是,当用户点击它时,您正在更新下拉内容。最好在相关下拉列表更改时更新下拉列表。例如:
$('#drop1').change(function(){
$('#drop2').load(url, {option: $('#drop1').val()})
})
#2
A polling solution or an onchange solution as described by @Nadia is likely your best bet here.
@Nadia描述的轮询解决方案或onchange解决方案可能是您最好的选择。