过滤器其他选择一个选项时选项
问题描述:
这是我在动作中遇到的问题,但同样容易适用于Javascript或Jquery。基本上,我有3个选择框,例如:过滤器其他选择一个选项时选项
<select id="color">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
<select id="size">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select id="type">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
当选择一个颜色 - 我想要的尺寸和类型来过滤出那些可用于该颜色。此外,当用户选择尺寸时,该类型应该进一步减小,并且颜色也应该根据尺寸进行过滤。
我一直在与这个问题搏斗一段时间,还没有找到一个优雅的解决方案。有没有人有任何方法的线索?
答
// Assuming this is some kind of store, with items with different capabilities.
var data = [{id:"item1", color:"red", size:1, type:"A"},
{id:"item2", color:"red", size:2, type:"B"},
{id:"item3", color:"blue", size:3, type:"C"},
{id:"item4", color:"green", size:3, type:"C"}];
$('select#color').change(function(e){
var value = $(this).val();
var sizes = [];
var types = [];
$.each(data, function(i, val) {
if (val.color == value) {
// only add options once
if (!sizes.indexOf(val.size)
sizes.push(val.size);
if (!sizes.indexOf(val.type)
types.push(val.type);
}
});
// now you would have arrays with all the available options,
// which you could then use to render the select options.
// since I don't know about the exact usage this may or may not be optimal
// in your case.
// it's not a complete solution, but may help to get you started.
答
-
填充2个结构,一个映射到颜色可用的编缉尺寸的阵列,一个映射颜色/尺寸组合(关键是颜色+“” +大小),可用的编缉类型的阵列。
注:您可以使用1嵌套结构,选择您的偏好。然后,每种颜色的尺寸列表是该颜色子结构中的键列表。
有JavaScript通过onSelect处理程序填充选择。
这个好教程:
+0
第二个链接仅向我展示了一个带有2个选择框的示例,并且按线性顺序排列,这会使事情变得更容易。但是,就我而言,我需要能够从3个不同的选择框中选择任何一个,以筛选未选择的2个选项。 – majman 2009-09-14 20:43:01
尝试这个现在... – majman 2009-09-14 17:54:52
这个解决方案没有得到我,据我所希望的。数据中的情况更复杂,其中的项目更像: {id:“item1”,color:[“red”,“blue”],size:[1,2,3],type:“A”}例如 ... – majman 2009-09-14 20:40:58