Select 直观地隐藏特定选项（选择下拉框）

我的产品有两种选择，比如第一种颜色，第二种尺寸 颜色1有6个不同的大小，所以第一个选项标题将是1，1，1，1，1，1和第二个选项（大小）标题将像1英寸，2英寸，3英寸…等等在这种情况下，我如何隐藏第一个选项（颜色）下拉选择框，只显示第二个选项（大小）下拉框，而不是显示第一个选项（颜色）下拉框我想放一些像这样的文本“你的颜色：1”，然后显示第二个选项下拉框（大小选择器下拉） 所以最后看起来是

你的颜色：1 [带有六个选项标题的大小选择器下拉框]

我知道我可以删除shopify管理页面中的第一个选项，但由于某些原因，我不能简单地删除第一个选项，我必须将它们隐藏起来

任何人都可以

---

提前感谢你们这么多人

我会考虑使用Javascript来解决这个问题

让我们先从显示颜色开始。我认为最简单的方法是在产品模板中创建一个元素，并将其初始隐藏：

<p id="color-label" style="display:none">{{ product.variants.first.option1 }}</p>

第一个生成的下拉列表将被分配一个select元素id+“-option-0”（在本例中为product-select-option-0）的id，第二个下拉列表将被分配select元素id+“-option-1”，依此类推。每个select都包装在div.selector-wrapper中

所以，把这一切结合起来。。。在调用new Shopify.options Selectors后插入类似的内容。这假设jQuery是可用的。基本上是检查“颜色”下拉列表是否有1个元素，如果有，则隐藏“选择”元素并显示颜色：

if (jQuery('#product-select-option-0 option').size() == 1) {
  jQuery('#product-select-option-0').parent('.selector-wrapper').hide();
  jQuery('#color-label').show();
}

if (jQuery('#product-select-option-0 option').size() == 1) {
  jQuery('#product-select-option-0').parent('.selector-wrapper').hide();
  jQuery('#color-label').show();
}