过滤器其他选择一个选项时选项

Question

这是我在动作中遇到的问题，但同样容易适用于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> 

当选择一个颜色 - 我想要的尺寸和类型来过滤出那些可用于该颜色。此外，当用户选择尺寸时，该类型应该进一步减小，并且颜色也应该根据尺寸进行过滤。

我一直在与这个问题搏斗一段时间，还没有找到一个优雅的解决方案。有没有人有任何方法的线索？

Answer 1

// 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. 

Answer 2

1. 填充2个结构，一个映射到颜色可用的编缉尺寸的阵列，一个映射颜色/尺寸组合（关键是颜色+“” +大小），可用的编缉类型的阵列。

   注：您可以使用1嵌套结构，选择您的偏好。然后，每种颜色的尺寸列表是该颜色子结构中的键列表。

2. 有JavaScript通过onSelect处理程序填充选择。

这个好教程：

One select

Two selects (closer to what you want)