在Shopify的产品页面上显示/隐藏变体元字段数据

我试图在shopify的产品页面上显示特定变体元字段的数据。如果选择了一个变量，我想用相应的id显示div。我已经在互联网上搜索过了，但找不到有效的解决方案。任何帮助都将不胜感激

shopify创建的选项：

    <select id="product-selectors" name="id" style="display:none">                    
                <option selected="selected" value="7991232067">Black / Small</option>
                <option value="7991232515">Black / Medium</option>                    
                <option value="7991232387">Black / Large</option>                    
                <option value="7991232323">Black / Extra Large</option>                    
                <option value="7991232259">Orange / Small</option>                    
                <option value="7991232451">Orange / Medium</option>                    
                <option value="7991232131">Orange / Large</option>                    
                <option value="7991232195">Orange / Extra Large</option>                    
              </select>

这项工作：

var variant = true;
if (variant) {
  $('select[name="id"]').change(function() {
      var targetId = $(this).find(' option:selected').val();
      $('.variant-weight').hide();
      $('#' + targetId).show();
  });
}

---

结果是有一个隐藏的输入来控制变化。这项工作：

    $(document).ready(function(){
    var value = $('select[name=id]').val();
    var targetId = '#'+$('select[name=id]').val();
    $(targetId).show();
});
    $('.swatch input').on('change', function(){
var value = $('select[name=id]').val();
    var targetId = '#'+$('select[name=id]').val();
    $(targetId).show();
    $(targetId).hide();
    });

---

如果未定义（变体）

，则该代码仅适用于具有2个或更多变体的产品。对于任何没有变化的产品，“targetId”不会显示

    if (variant) {
    $('select[name="id"]').change(function() {
    var targetId = $(variant).find('select[name="id"] option:selected').val();
    $('#' + targetId).show();
    });
    }

var variant = true;
if (variant) {
  $('select[name="id"]').change(function() {
      var targetId = $(this).find(' option:selected').val();
      $('.variant-weight').hide();
      $('#' + targetId).show();
  });
}

    $(document).ready(function(){
    var value = $('select[name=id]').val();
    var targetId = '#'+$('select[name=id]').val();
    $(targetId).show();
});
    $('.swatch input').on('change', function(){
var value = $('select[name=id]').val();
    var targetId = '#'+$('select[name=id]').val();
    $(targetId).show();
    $(targetId).hide();
    });