效果图

示例图-1.png

示例图-2.png

效果说明

可选项为深色边框，不可选项为浅色边框，已选中的为红底白字。
如图所示的存货数据为：

幻夜黑-全网通4G64G
幻夜黑-全网通6G64G
幻夜黑-全网通6G128G
幻影蓝-全网通4G64G

在示例图-1中因为选择了幻影蓝，所以模型只有全网通4G64G可选，同级别的幻夜黑也可以选；示例图-2因为选择了全网通和幻夜黑，因为幻夜黑对应三种情况都有，所以三种模型都为可选，而已选中的全网通对应只有幻夜黑，所以幻夜黑可选而炫影蓝为不能选。

效果分析

需要有两组数据：

• 一组数据给定所有可选的型号，示例如下：

{
  "颜色"：[{
    "value":"幻夜黑"，
    "selected":false,
    "level":1,
    "active":true
  },{
    "value":"幻影蓝"，
    "selected":false,
    "level":1,
    "active":true
  }],
  "模型"：[{
    "value":"全网通4G64G"，
    "selected":false,
    "level":2,
    "active":true
  },{
    "value":"全网通6G64G"，
    "selected":false,
    "level":2,
    "active":true
  },{
    "value":"全网通6G128G"，
    "selected":false,
    "level":2,
    "active":true
  }]
}

• 一组给定所有有库存的数据，示例如下：

{
  "幻夜黑,全网通4G64G":true,
  "幻夜黑,全网通6G64G":true,
  "幻夜黑,全网通6G128G":true,
  "幻影蓝,全网通4G64G":true
}

有两步需要实现：

• 点击事件
  点击时，如果是点击的active按钮，且按钮selected为false，需要同级按钮的选中消失，将该按钮selected设为true；不同级则不用管。如果之前selected就为true了，则需要将selected还原为false。
• 判断是否active
  判断是否active则需要新建一个selectedName数组按级来装当前级选中的value。比如第一级选中了幻夜黑则存为selectedName[1-1] = '幻影黑'，（注意数组是从第0项开始，而level是从第1项开始，则需要减去1）。当第一级选中幻影黑时候判断其他是否可选的思路则是：对于同级假如selectedName[0]换为同级的元素，selectedName[1]为空，判断依据为selectedName里有值为空（有可选空间）或者selectedName这个数组为库存数据的键值，这里同级的幻影蓝active为true。对于不同级，selectedName[0]依然为'幻影黑'，下面对于全网通4G64G按钮，selectedName[1]就为''全网通4G64G"，然后看selectedName这个数组里有值为空（有可选空间）或者selectedName这个数组为库存数据的键值，这里存在该键值，所以该按钮的active为true。

关于代码

有了这些数据结构和分析，只需要根据条件改变数据就能更改在页面中的显示，达到相应效果了。