Shopify - 在varient select上显示内联元素

Question

目前，我想在MainVC输入中选择产品的特定变体时，在页面上显示/隐藏内联元素。我已尝试使用jquery多次尝试访问选择而没有运气，甚至尝试使用内联<select>液体标记。任何帮助将不胜感激！

基本上我希望<% if %>显示何时选择其中两个选项，否则不显示文本框。

以下是我所拥有的：

textbox

现在，如果只选择下面的内容，可以在选择option1或option2时添加文本框。

{% if product.variants.size > 1 %}
      <div id="product-variants" class="card_options">
        <select id="product-select-{{ product.id }}" name="id" class="hidden line-item-property__field">
          {% for variant in product.variants %}
          <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
          {% endfor %}
        </select>
      </div>

      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" /> 

{% endif %}

这应该是这样的：

Answer 1

更新：显然我的jQuery解决方案有效。我只是针对页面上的错误选择。我必须动态检索select而不是按类或id查找它。出于某种原因，Shopify会创建第二个<select>输入并隐藏您在products.liquid文档中看到的输入。所以我不得不求助于使用$(".selector-wrapper select").bind('change', function(event) {//do something}和var selected = $('.selector-wrapper select option:selected').val();来检索选项的值。我将使用相同的逻辑链接一个小提琴，你只需要用我上面列出的内容更新它。希望这有助于任何寻找相同解决方案的人。

<强> Fiddle Demo