样本可配置显示选项的选择

Question

我正在尝试使用javascript创建一个交互式表单。我们的产品有多种选择[选项]，适用于每种颜色，内存容量或尺寸。

var data = [
  {'id': 5, 'in_stock': true, 'color': 2, 'capacity': 2},
  {'id': 2, 'in_stock': true, 'color': 4, 'capacity': 2},
  {'id': 4, 'in_stock': false, 'color': 1, 'capacity': 1}, // disabled option, not have inventary.
  {'id': 10, 'in_stock': true, 'color': 3} // disabled option for all capacity.
]

# to see better please open JSFiddle

这个想法是每个“id”都有一些带库存的属性， select 充当“数组”[data] 的过滤器，如果没有库存禁用这个选项。

JSFiddle example live.