Javascript 在Bigcommerce中实现JS和支持代码，以允许用户选择动态下拉列表

我写了一些JS，它支持CSS和HTML。最终活动将由bigcommerce用户选择出售的模型，所选模型的选项将包含子选项，如材料、颜色等

BigCommerce已经提供的代码需要额外编码，这是因为：

我希望在购物体验的早期做出选择，以启用或禁用其他稍后可选择的选项。范例

如果用户选择“选择下面的材质选项”，然后从该下拉列表中选择“胡桃木”作为材质选项。此now walnut产品其余购物选项的所有后续选项将仅显示walnut产品的选项选项，并将隐藏后面下拉列表中的所有Maple、Cocobolo和Babinga选项

我的科迪可以在这里找到：

HTML:

`<div id="wrap">
 <select id="main-select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="sub-select-1" class="sub-select" disabled="disabled">
<option value="foo">1 FOO</option>
</select>
<select id="sub-select-2" class="sub-select" disabled="disabled">
<option value="foo">2 FOO</option>
</select>
<select id="sub-select-3" class="sub-select" disabled="disabled">
<option value="foo">3 FOO</option>
</select>
</div>`

Css:

---

我需要在BigCommerce中嵌入哪些文件才能激活它，有什么线索吗？

这应该在产品页面上吗？我想我能帮上忙，但是我需要更多的信息，关于它应该在哪里，以及它应该在用户交互上发起什么样的变化，关于BigCommerce功能。

    $(document).ready(function () {

   //do something when the main element is changed
   $('#main-select').change(
       function(e){

        //get what value was selected
        var val = $(this).val();


        //disable all sub selects, also hides them because of the css rule
        //note that using the disabled also prevents that element 
        //from submitting to the server, if you want all to submit
        //you use addClass('hidden') and removeClass('hidden') to 
        //hide them from the user
        //e.g. $('#sub-select-one').removeClass('hidden');

        //disabling all elements with sub-select class
        $('#wrap .sub-select').attr('disabled','disabled');

        //enable just the desired sub-select
        if(val == '1'){
            $('#sub-select-1').removeAttr('disabled');
        }
        else if(val=='2'){
            $('#sub-select-2').removeAttr('disabled');
        }
        else if(val=='3'){
           $('#sub-select-3').removeAttr('disabled');
        }
       }
      );
    });

select.sub-select[disabled="disabled"]{
    display: none;
}
.hidden{
    display: none;
}