如何使用jquery动态地将数组值映射到下拉列表

Question

我有一个嵌套数组，我使用bootstrap创建了多个下拉列表。

我需要将所有 memQ 键值附加到dropdown1以及更改 memQ 时，应填充相应的颜色键值。

我已过滤掉数组并将颜色映射到相应的 memQ ，但无法将它们映射到下拉菜单。

在下面附加的图像中，在选择每个128,64,16等时，应填充相应的颜色。

这就是我所期待的：

这就是我的尝试：

HTML：

下拉1：

<div class="col-sm-4" id="dropdown1">
    <ul class="sort-option">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="">Memory size</span>
                <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
            <ul class="dropdown-menu col-sm-12">
                    <li>
                        <a href="#"></a>
                    </li>

            </ul>
        </li>
    </ul>
</div> 

下拉2：

<div class="col-sm-4" id="dropdown2">
    <ul class="sort-option">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="">Color</span>
                <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
            <ul class="dropdown-menu col-sm-12">
                    <li>
                        <a href="#"></a>
                    </li>

            </ul>
        </li>
    </ul>
</div> 

JSON：

var dSkuResp={"models":[{"deviceType":"Smartphone","name":"iPhone 6S","value":"iPhone 6S","variations":[{"memQ":"128","os":"iOS","color":"Gold","name":"Apple® iPhone® 6s 128GB in Gold","displayName":"iPhone 6S 128GB Gold","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Rose Gold","name":"Apple® iPhone® 6s 128GB in Rose Gold","displayName":"iPhone 6S 128GB Rose Gold","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Silver","name":"Apple® iPhone® 6s 128GB in Silver","displayName":"iPhone 6S 128GB Silver","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Gray","name":"Apple® iPhone® 6s 128GB in Space Gray","displayName":"iPhone 6S 128GB Space Gray","memU":"GB","maxValue":"335.0"},{"memQ":"16","os":"iOS","color":"Gold","name":"Apple® iPhone® 6s 16GB in Gold","displayName":"iPhone 6S 16GB Gold","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Rose Gold","name":"Apple® iPhone® 6s 16GB in Rose Gold","displayName":"iPhone 6S 16GB Rose Gold","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Silver","name":"Apple® iPhone® 6s 16GB in Silver","displayName":"iPhone 6S 16GB Silver","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Gray","name":"Apple® iPhone® 6s 16GB in Space Gray","displayName":"iPhone 6S 16GB Space Gray","maxValue":"300.0"},{"memQ":"64","os":"iOS","color":"Gold","name":"Apple® iPhone® 6s 64GB in Gold","displayName":"iPhone 6S 64GB Gold","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"Rose Gold","name":"Apple® iPhone® 6s 64GB in Rose Gold","displayName":"iPhone 6S 64GB Rose Gold","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"Silver","name":"Apple® iPhone® 6s 64GB in Silver","displayName":"iPhone 6S 64GB Silver","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"Gray","name":"Apple® iPhone® 6s 64GB in Space Gray","displayName":"iPhone 6S 64GB Space Gray","memU":"GB","maxValue":"320.0"}]},{"deviceType":"Smartphone","name":"iPhone 6S","value":"iPhone 6S","variations":[{"memQ":"128","os":"iOS","color":"Blue","name":"Apple® iPhone® 6s 128GB in Gold","displayName":"iPhone 6S 128GB Gold","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Green","name":"Apple® iPhone® 6s 128GB in Rose Gold","displayName":"iPhone 6S 128GB Rose Gold","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Yellow","name":"Apple® iPhone® 6s 128GB in Silver","displayName":"iPhone 6S 128GB Silver","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Black","name":"Apple® iPhone® 6s 128GB in Space Gray","displayName":"iPhone 6S 128GB Space Gray","memU":"GB","maxValue":"335.0"},{"memQ":"16","os":"iOS","color":"Purple","name":"Apple® iPhone® 6s 16GB in Gold","displayName":"iPhone 6S 16GB Gold","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Maroon","name":"Apple® iPhone® 6s 16GB in Rose Gold","displayName":"iPhone 6S 16GB Rose Gold","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Pink","name":"Apple® iPhone® 6s 16GB in Silver","displayName":"iPhone 6S 16GB Silver","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Violet","name":"Apple® iPhone® 6s 16GB in Space Gray","displayName":"iPhone 6S 16GB Space Gray","maxValue":"300.0"},{"memQ":"64","os":"iOS","color":"Red","name":"Apple® iPhone® 6s 64GB in Gold","displayName":"iPhone 6S 64GB Gold","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"Orange","name":"Apple® iPhone® 6s 64GB in Rose Gold","displayName":"iPhone 6S 64GB Rose Gold","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"Carbon","name":"Apple® iPhone® 6s 64GB in Silver","displayName":"iPhone 6S 64GB Silver","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"C Gray","name":"Apple® iPhone® 6s 64GB in Space Gray","displayName":"iPhone 6S 64GB Space Gray","memU":"GB","maxValue":"320.0"}]}]};

JS：

var colors = [];

_.each(dSkuResp.models, function(oVal, oIdx) {
    colors.push({});
    _.each(oVal.variations, function(nVal, nIdx) {
        if (!colors[colors.length - 1][nVal.memQ]) {
          colors[colors.length - 1][nVal.memQ] = [];
        }

        if (_.indexOf(colors[colors.length - 1][nVal.memQ], nVal.color) === -1) {
          colors[colors.length - 1][nVal.memQ].push(nVal.color);
        }
    });
});