javascript - 動的ドロップダウンを持つ配列

Question

配列を使用していくつかの動的ドロップダウンを作成しようとしていますが、その概念に頭を悩ませることはできません。ページの読み込み時に 4 つの配列を正常に作成しています (注: 以下のコードではなく、配列の単なる表現です)。

optionsOne ["sm","md","md","sm"]
optionsTwo ["white","white","red","red"]
availOne ["false","true","true","true"]
availTwo ["false","true","true","true"]

両方の利用可能なアレイは同じです。「利用可能」という 1 つのアレイに切り詰めることができます。このデータが表しているのは、製品の利用可能性を上から下にたどっていくということです。したがって、「sm white」は false (利用不可) です。「md白」は本当です。「md red」は本当です。「SMレッド」は本当です。

ここで、選択ドロップダウンを作成する必要がありますが、重複はしたくありません。現在、サイズを表すドロップダウンと色を表すドロップダウンの 2 つを作成しています。残念ながら、私の最初のドロップダウンは、2 つの一意のアイテム (sm、md) のみを表示する必要があるときに、4 つのアイテム (sm、md、md、sm) を表示しています。2 番目のドロップダウンには 4 つの項目が表示されていますが、最初の項目の選択に基づいて 2 つだけ表示され、更新されるはずです。常に「白、赤」を表示する必要がありますが、最初のドロップダウンで「sm」を選択した場合、<option>sm/白の可用性が false であるため、「白」が無効に設定されます。

重複を持たないようにするある種の配列を作成する方法に完全に困惑していますが、2番目のドロップダウンで正しい結果を生成します

optionsOne = [];
optionsTwo = [];
availOne = [];
availTwo = [];

Shopify.updateOptionsInSelector = function(selectorIndex) {
switch (selectorIndex) {
case 0:
var selector = jQuery('.single-option-selector:eq(0)');
break;
case 1:
var selector = jQuery('.single-option-selector:eq(1)');
break;
}
if(selectorIndex===0){
    selector.empty();
    //this is looping and creating duplicates
    for (var i=0; i<optionsOne.length; i++) {
        var option = optionsOne[i];
        var newOption = jQuery('<option></option>').val(option).html(option);
        selector.append(newOption);
    }
}else if(selectorIndex===1){
    selector.empty();
    //this is looping and creating duplicates
    //also, this one should create an option as disabled if the variant is unavailable
    for (var i=0; i<optionsTwo.length; i++) {
        var option = optionsTwo[i];
        var available = availTwo[i];
        //alert('changed the first selector, this item is labeled '+option+' and availability is '+available);
        if(available=="true"){
            var newOption = jQuery('<option></option>').val(option).html(option);
        }else{
            var newOption = jQuery('<option disabled></option>').val(option).html(option);
        }
        selector.append(newOption);
    }
}

selector.trigger('change');
};

Shopify.linkOptionSelectors = function(product) {
// Building our mapping object.
for (var i=0; i<product.variants.length; i++) {
var variant = product.variants[i];
//if (variant.available) {

// Gathering values for the 1st drop-down.
optionsOne.push(variant.option1);
if (variant.available) {
    availOne.push('true');
}else{
    availOne.push('false');
}   

// Gathering values for the 2nd drop-down.
optionsTwo.push(variant.option2);
if (variant.available) {
    availTwo.push('true');
}else{
    availTwo.push('false');
}

optionsOne = Shopify.uniq(optionsOne);
optionsTwo = Shopify.uniq(optionsTwo);

}

// Update options right away.
Shopify.updateOptionsInSelector(0);
if (product.options.length > 1) Shopify.updateOptionsInSelector(1);
// When there is an update in the first dropdown.
jQuery(".single-option-selector:eq(0)").change(function() {
Shopify.updateOptionsInSelector(1);
return true;
});

};