无选择时显示

Question

在选择“选择一个选项”时，具有div以显示。 默认情况下，“选择一个选项”是在页面加载时选择的选项。

我知道我需要使用 .show，但是当有两个可用选项并且其中任何一个都选择了一个选项时，我不确定如何让它专门工作。

当产品有两个选择大小和颜色时，我需要显示 Div，直到两个选择都不是“选择一个选项”

我想将 Jquery 与 woocommerce 可变产品一起使用。 我已经使用表格变体来隐藏可变价格表格，但如果选择了“选择选项”，我希望它再次显示。

jQuery('table.variations select').on('change', function() {

  jQuery('.vanish ').hide();

} );

<table class="variations" cellspacing="0">
  <tbody>
    <tr>
      <td class="label"><label for="pa_quantity">Quantity</label></td>
      <td class="value">
        <select id="pa_quantity" class="" name="attribute_pa_quantity" data-attribute_name="attribute_pa_quantity" data-show_option_none="yes">
          <option value="">Choose an option</option>
          <option value="each" class="attached enabled">Each</option>
          <option value="pck-10" class="attached enabled">PCK/10</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="label"><label for="pa_color">Colour</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="blue" class="attached enabled">Blue</option>
          <option value="red" class="attached enabled">Red</option>
          <option value="white" class="attached enabled">White</option>
          <option value="yellow" class="attached enabled">Yellow</option>
        </select><a class="reset_variations" href="#" style="visibility: visible; display: block;">Clear</a>
      </td>
    </tr>
  </tbody>
</table>

目标是在选择“选择一个选项”选项时显示一个 div，并在选择任何其他选项时隐藏它

Answer 1

根据您的问题和提供的代码，我假设您需要隐藏如果未选择选择选项，或者如果选择了选择选项以外的选项，您需要隐藏某些 div。

如果这是你想要的，请写在下面，我已经写了一些可能有帮助的答案

html部分/选择选项

$('.select').on('change', function() { //on change function on select option 

  value = $(this).val(); //take value from options


  if (value != 'choose') { //if value is not choose than hide
    $('#div_use').css('display', 'None'); //hiding div
  }else{
     $('#div_use').css('display', ''); //show div again 
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> <!-- select option -->
        <select class="select">
           
            <option value ="choose">choose option</option>
            <option value ="test1">This is an option1</option>
            <option value ="test2">This is an option2</option>
           
        </select>
    </div>
<div id='div_use'>not selected<div> <!-- div to hide -->