求JQ或JS仿淘宝商品详情选择规格颜色等功能

Question

选择要求：有几个属性，如 尺寸和颜色，尺寸：M、L、XL、XXL 等，颜色：黑色、白色、黄色、红色等，其每个属性都有关联，如 首选M，颜色除黑色或其他外都能选择；如首选 黄色，尺寸除XXL或其他外都能选择。
自己写的有问题。代码放上一部分。已生成的数组求值。
HTML：↓

 <div class="sys_item_spec">
    <dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
    <dt>尺寸:</dt>
    <dd>
        <ul class="sys_spec_text" id="123">
        <li data-aid="3"  id="s"><a href="javascript:;" title="S" >S</a><i></i></li>
        <li data-aid="3" id="m"><a href="javascript:;" title="M" >M</a><i></i></li>
        <li data-aid="3"  id="xs"><a href="javascript:;" title="XS" >XS</a><i></i></li>
        </ul>
    </dd> 
    </dl>
    <dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
    <dt>颜色:</dt>
    <dd>
        <ul class="sys_spec_text" id="abc">
        <li data-aid="3"  id="b"><a href="javascript:;" title="黑色" >黑色</a><i></i></li>
        <li data-aid="3"  id="w"><a href="javascript:;" title="白色" >白色</a><i></i></li>
        <li data-aid="3"  id="r"><a href="javascript:;" title="红色" >红色</a><i></i></li>
        </ul>
    </dd>
    </dl>
</div>    

JS：↓

//说明：goodsguige[0] = ["分组ID1","分组规格名称","主ID","主规格名"];
goodsguige[0] = ["guige1","尺寸","s","S"];
goodsguige[1] = ["guige1","尺寸","m","M"]; 
goodsguige[2] = ["guige1","尺寸","xs","XS"];
goodsguige[5] = ["guige2","颜色","b","黑色"];
goodsguige[6] = ["guige2","颜色","w","白色"];
goodsguige[6] = ["guige2","颜色","r","红色"];

//说明：goodsgroup[0] = ["组号","分组ID","主ID"];
goodsgroup[0] = ["4","guige1","s"];
goodsgroup[1] = ["4","guige2","b"];
goodsgroup[2] = ["5","guige1","m"];
goodsgroup[3] = ["5","guige2","w"];
goodsgroup[4] = ["6","guige1","xs"];
goodsgroup[5] = ["6","guige2","r"];
goodsgroup[6] = ["7","guige1","m"];
goodsgroup[7] = ["7","guige2","r"];
goodsgroup[8] = ["8","guige1","xs"];
goodsgroup[9] = ["8","guige2","w"];

Answer 1

以前写的一个demo，自己参考，注意规则数据结构，不是你这种形式的。。

jquery仿淘宝规格颜色选择效果