Question

我有以下

<label>Model</label>
<select name="option1" id="option1">
    <option data-sku="IPH4-RED-ASD" value="iPhone4">iPhone4</option>
    <option data-sku="IPH5-GREEN-QWE" value="iPhone5">iPhone5</option>
    <option data-sku="IPH5-BLUE-QWE" value="iPhone5">iPhone5</option>
    <option data-sku="IPH5-ORANGE-QWE" value="iPhone5">iPhone5</option>
</select>

<label>Color</label>
<select name="option2" id="option2">
    <option data-sku="IPH4-RED-ASD" value="Red">Red</option>
    <option data-sku="IPH5-GREEN-QWE" value="Green">Green</option>
    <option data-sku="IPH6-BLUE-ZXC" value="Blue">Blue</option>
    <option data-sku="IPH5-ORANGE-QWE" value="Orange">Orange</option>
</select>

<label>Brand</label>
<select name="option3" id="option3">
    <option data-sku="IPH4-RED-ASD" value="ASD">ASD</option>
    <option data-sku="IPH5-GREEN-QWE" value="QWE">QWE</option>
    <option data-sku="IPH5-BLUE-ZXC" value="ZXC">ZXC</option>
</select>

正如您所看到的，iPhone5在模型下拉列表中显示3次，因为它带有2种不同的颜色，这使得它成为2个具有独特SKU的独立产品。

当用户选择iPhone4时，我会有功能，如果有任何变种，我会显示其他变种。

然后问题是我不想在下拉列表中显示iPhone5 3次但只有一次。我知道我可以从JSON数组中删除副本或从dom中删除选项但我需要保留sku，如果变量有库存或者价格不同，我会从中获取详细信息。

Shopify和Woocommerce具有相同的功能，除了结果不重复，我可以做什么的任何想法/建议？

我使用jquery打印选择并循环使用JSON格式的变体。

谢谢

Answer 1

如果我的问题正确，那么选项A就是这样使用substring方法并匹配data-sku va; ues并获取IPH5字符串并仅显示一个。

选项B是给予禁用标签，以便用户无法选择第二个和第三个iPhone，但可以看到它在那里。

jQuery多个产品变体下拉列表

1 个答案: