Question

这是我在actionscript中遇到的一个问题，但同样适用于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

填充2个结构，一个映射颜色到可用大小的数组，一个映射颜色/大小组合（键是颜色+“。”+大小）到可用类型的数组。

注意：您可以使用1种嵌套结构，选择您的偏好。然后，每种颜色的尺寸列表是该颜色的子结构中的键列表。
让JavaScript通过onSelect处理程序填充选择。

关于此的好教程是：

One select

Two selects (closer to what you want)

筛选其他选择选项时选择选项

2 个答案: