仅在SELECT字段不为空时显示“提交”按钮

Question

我无法仅在表单中显示选择字段的提交按钮。我有下拉菜单，因为表单和按钮都具有相同的类名，所以它显示并隐藏了所有这些，而不仅仅是该表单中的提交按钮。

我已经尝试过 .closest 和 .siblings 以及 .this ，但没有任何效果。我做错了什么？

这是我的 HTML

<div class="wp_cart_button_wrapper">
<form method="post" class="wp-cart-button-form" action="" style="display:inline" onsubmit="return ReadForm(this, true);">
<input type="hidden" id="_wpnonce" name="_wpnonce" value="4ef19837f1" style="display: none;">
<input type="hidden" name="_wp_http_referer" value="/products/" style="display: none;">
<div class="wp_cart_variation_section">
<span class="wp_cart_variation_name">Logo Color  : </span>
<select name="variation1" class="wp_cart_variation1_select" onchange="ReadForm (this.form, false);"><option value=" "> </option><option value=" Black "> Black </option><option value=" Green "> Green </option><option value=" Red "> Red </option><option value=" Blue"> Blue</option></select><br></div>
<input type="submit" class="wspsc_add_cart_submit" name="wspsc_add_cart_submit" value="Add to Cart" style="display: none;"> 
<input type="hidden" name="wspsc_product" value="Suzuki Digital Fuel Gauge ( )" style="display: none;">
<input type="hidden" name="price" value="69.99" style="display: none;">
<input type="hidden" name="shipping" value="0.001" style="display: none;">
<input type="hidden" name="addcart" value="1" style="display: none;"> 
<input type="hidden" name="cartLink" value="https://motorgremlin.com:443/products/" style="display: none;"><input type="hidden" name="product_tmp" value="Suzuki Digital Fuel Gauge" style="display: none;">
<input type="hidden" name="item_number" value="" style="display: none;">
<input type="hidden" name="hash_one" value="9a905bd16028ff467e67534f28f2a986" style="display: none;">
<input type="hidden" name="hash_two" value="6c9ed95be3289ffa48e727369b49e5c2" style="display: none;">
</form>
</div>    

jQuery

$(".wp_cart_variation_section select").on('change', function() {
        var x = this.selectedIndex;
        if (x == "") {
           $(".productButton, .wp_cart_button_wrapper input").hide();
        } else {
           $(".productButton, .wp_cart_button_wrapper input").show();
        }
    });
$(".productButton, .wp_cart_button_wrapper 
input").css("display","none"); 

我只想以这种形式显示按钮。我怎样才能做到这一点？

Answer 1

...它显示和隐藏所有这些，而不仅仅是该表单中的提交按钮。

使用:submit selector 定位提交按钮。

$(".wp_cart_variation_section select").change(function () {
  var state = this.selectedIndex > 0;

  $(".productButton:submit, .wspsc_add_cart_submit").toggle(state);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wp_cart_button_wrapper">
  <form method="post" class="wp-cart-button-form" action="" style="display:inline" onsubmit="return ReadForm(this, true);">
    <input type="hidden" id="_wpnonce" name="_wpnonce" value="4ef19837f1" style="display: none;">
    <input type="hidden" name="_wp_http_referer" value="/products/" style="display: none;">
    
    <div class="wp_cart_variation_section">
      <span class="wp_cart_variation_name">Logo Color  : </span>
      <select name="variation1" class="wp_cart_variation1_select" onchange="ReadForm (this.form, false);">
        <option value=" "> </option>
        <option value=" Black "> Black </option>
        <option value=" Green "> Green </option>
        <option value=" Red "> Red </option>
        <option value=" Blue"> Blue</option>
      </select>
      <br>
    </div>
    
    <input type="submit" class="wspsc_add_cart_submit" name="wspsc_add_cart_submit" value="Add to Cart" style="display: none;">
    <input type="hidden" name="wspsc_product" value="Suzuki Digital Fuel Gauge ( )" style="display: none;">
    <input type="hidden" name="price" value="69.99" style="display: none;">
    <input type="hidden" name="shipping" value="0.001" style="display: none;">
    <input type="hidden" name="addcart" value="1" style="display: none;">
    <input type="hidden" name="cartLink" value="https://motorgremlin.com:443/products/" style="display: none;">
    <input type="hidden" name="product_tmp" value="Suzuki Digital Fuel Gauge" style="display: none;">
    <input type="hidden" name="item_number" value="" style="display: none;">
    <input type="hidden" name="hash_one" value="9a905bd16028ff467e67534f28f2a986" style="display: none;">
    <input type="hidden" name="hash_two" value="6c9ed95be3289ffa48e727369b49e5c2" style="display: none;">
  </form>
</div>

Answer 2

您的选择器似乎与提交按钮不匹配。试试这个吧。

var x = this.selectedIndex;
$(this).closest(".wp-cart-button-form").find(".wspsc_add_cart_submit").toggle(x && x > 0);