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

$('.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 -->

无选择显示

1 个答案: