Question

我正在尝试使用数组创建一些动态下拉列表，但我无法绕过这个概念。我在页面加载时成功创建了4个数组（注意：不是下面的代码，只是数组的表示）：

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

两个可用的数组是相同的，我可以将其减少到只有一个数组，“可用” 这些数据对我来说代表的是您按照自上而下的产品可用性进行操作，因此“sm white”为false（不可用）。 “md white”是真的。 “md red”是真的。 “sm red”是真的。

现在我需要创建选择下拉列表，但我不想重复。我目前正在创建两个下拉列表，一个代表大小，一个代表颜色。不幸的是，当我需要只显示两个唯一的（sm，md）时，我的第一个下拉列表显示了4个项目（sm，md，md，sm）。我的第二个下拉列表显示了4个项目，但它应该只显示两个项目，并根据第一个项目的选择进行更新。它应始终显示“白色，红色”但在第一个下拉列表中选择“sm”的情况下，它会将“白色”<option>设置为禁用，因为sm / white可用性为false。

我完全不知道如何创建一些允许我没有重复的数组，但仍然会在第二个下拉列表中生成正确的结果

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;
});

};

具有动态下拉列表的数组

0 个答案: