javascript - 使用 WooCommerce，我希望在客户单击产品价格中的“库存”时隐藏/禁用产品属性“颜色部分”并了解如何

Question

function hideStock(){
        var selected = document.getElementById("stk");
        var hidden = document.getElementById("pa_color");
        if (selected.onchange=="stock") {
                hidden.style.display = "none";
        }
}

<table class="variations" cellspacing="0">
  <tbody>
        <tr>
        <td class="label"><label for="pa_pricing">Pricing</label></td>
        <td class="value">
    <select id="pa_pricing" class="" name="attribute_pa_pricing" data-attribute_name="attribute_pa_pricing" data-show_option_none="yes" onchange= "getSelectValue(this.value);">
      <option value="">Choose an option</option>
      <option value="retail" >Retail</option>
      <option value="stock" id = "stk" >Stock</option>
    </select>                       
          </td>
            </tr>
            <tr>
            <td class="label"><label for="pa_color">Color</label></td>
                        <td class="value">
        <select id="pa_color" class=" " name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes">
            <option value=""  >Choose an option</option>
            <option value="aqua"  >Aqua</option>
            <option value="black"  >Black</option>
            <option value="mixed"  >Mixed</option>

        </select>
                <a class="reset_variations" href="#">Clear</a>
            </td>
            </tr>
    </tbody>
</table>

此 html 代码是我现在正在做的 woocommerce 商店的一小部分，它具有产品属性，一个用于价格（零售、库存），另一个用于颜色

标签： javascriptphphtmljquerycss

Answer 1

试试看：

var selected = document.getElementById("stk");
var hidden = document.getElementById("pa_color");
selected.addEventListener('change', _ => {
    if (selected.value == "stock") {
        hidden.style.display = "none";
    }
}