jquery - 未选择时显示

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 -->