過濾器其他選擇一個選項時選項

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)