【发布时间】：2015-12-22 09:45:02
【问题描述】：
我有以下
<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 种不同的颜色，这使其成为具有独特 SKU 的 2 个独立产品。
当用户选择 iPhone4 时，我拥有该功能，它会显示其他变体（如果有的话）。
那么问题是我不想在下拉列表中显示 iPhone5 3 次，但只显示一次。我知道我可以从 JSON 数组中删除重复项或从 dom 中删除选项，但如果变体有库存或价格不同，我需要保留我从中获取详细信息的 sku。
Shopify 和 Woocommerce 具有相同的功能，只是结果不会重复，我可以做什么的任何想法/建议？
我使用 jquery 打印选择并循环遍历 JSON 格式的变体。
谢谢
【问题讨论】：
-
从 JSON 中删除它并在
option1中仅显示一次，我认为您在用户选择后也会从option2下拉列表中获得 SKU！ -
您可以检查该选项是否存在，如果是，请不要将其添加到您的选择框中；）
-
@theblackgigant 如果我不将它添加到选择框中，那么我将不知道 iphone5 是否有红色和品牌选择，或者 iphone5 red 是否缺货等等.. .
-
@lesandru 你也可以检查它是否存在，如果存在，隐藏元素。因此它在您的选择框中可用，但用户无法选择该选项并且您拥有您的数据
-
@theblackgigant 你建议的问题是我根据option1的sku显示option2，基于option1和option2显示option3。如果我隐藏了 iPhone5 的 2 个副本，我不会在 option2 中获得与隐藏的 2 个相关的颜色，只是来自其他选项。所以可能我在显示变体的方式上做错了什么？
标签： jquery json product dropdown