使用jQuery编辑Shopify变体

好的，所以我正试图找出如何根据某人选择的产品变体使内容显示和消失，在这里的一些人的帮助下，我设法获得了jQuery代码，我需要根据下拉菜单中选择的选项使内容显示和消失，它在Shopify之外工作得非常好。唯一的问题是，一旦我尝试将它转移到Shopify，它将无法工作

以下是我的Shopify页面上的代码部分：

<form action="/cart/add" method="post">
        {% include 'bracelet-hair' %}<br>     
        {% include 'braid-style' %}<br>
            {% if product.variants.size > 1 %}
            <div id="product-variants">      
                <select id="product-select" name="id">
                    {% for variant in product.variants %}
                        <option value="{{ variant.id }}">{{ variant.title }}</option>
                    {% endfor %}
                </select>
            </div><!-- product variants -->
             {%include 'engraving' %}

{%包括“手镯发”%}

{%include'辫子样式'%}

{%如果product.variants.size>1%}
{product.variants%中的变量为%0}
{{variant.title}}
{%endfor%}
{%include'雕刻'%}

这是我的雕刻片段，这是我试图展示的代码和内容。（下面的“269270608”是我的变体id）

$（“#产品选择”）.change（函数（）{
var choice=$（this.val（）
如果（选项==“269270608”）{
//$（'#复选框'）。更改（函数（）{
$（'#hide2'）.removeClass（'hidden2'）；//在此处删除类
//});
}否则{
$（'#hide2'）.removeClass（）.addClass（'hidden2'）；//else addClass
}
});
雕刻？


雕刻信息：

---

我不确定Shopify的语法有多大，但我去他们的论坛时运气不好。非常感谢您的帮助，如果您需要更多信息，请告诉我。

您可能不希望表单中包含脚本部分，并且在包含jQuery时是否将其加载为$或jQuery？

<script>
$("#product-select").change(function(){
 var choice = $(this).val()

 if (choice == '269270608'){

//$('#checkbox').change(function(){
    $('#hide2').removeClass('hidden2');  //remove class here
//});

 }else{
    $('#hide2').removeClass().addClass('hidden2');  //else addclass
 }

});
</script>

<div id="hide2" class="hidden2">    
        <input type="checkbox" name="vehicle" value="Bike" />Engraving?
        <br>    
    Engraving Message:
        <input type="text" name="engraving">
        <br>    
</div>