Filtrer autre Sélectionnez Options lorsqu'une option est sélectionnée

Question

Ceci est un problème que je rencontre dans ActionScript, mais s'applique tout aussi bien à Javascript ou à Jquery. Au fond, j'ai 3 boîtes de sélection, .: par exemple

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

Lorsqu'une couleur est choisie - Je veux que la taille et le type de filtrer uniquement ceux qui sont disponibles pour cette couleur. De plus, lorsqu'un utilisateur choisit une taille, le type devrait diminuer davantage et la couleur devrait également être filtrée en fonction de la taille.

J'ai lutté avec ce problème pendant un certain temps, et je n'ai pas encore trouvé une solution élégante pour cela. Quelqu'un at-il des indices pour une approche?

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. Populate 2 structures, une couleur de mise en correspondance de réseau de tailles avialable, une combinaison de couleurs de mappage/taille (la touche est de couleur + "" + taille) de tableau de types avialable.

   NOTE: Vous pouvez le faire avec 1 structure imbriquée, choisissez votre préférence. Ensuite, la liste des tailles par couleur est une liste de clés dans la sous-structure pour cette couleur.

2. Avoir JavaScript pour remplir les sélections via handler OnSelect.

bons tutoriaux sur ce sont:

One select

Two selects (closer to what you want)