Question

我有一系列选择选项，客户可以使用这些选项来更改产品选项以满足他们的需求。这将改变价格，这是有效的。然而，我无法工作的一点是，我希望隐藏购买按钮，直到选中每个选项中的至少一个选项。

目前它有效，但如果其中一个选项有选择，则会显示购买按钮。如果所有选项都选择了选项，我怎样才能确保它只出现？

我几乎无法控制HTML，所以使用我的工作

HTML：

<div class="site-wrapper">
  <div class="product">
    <div class="product__price">
      £20.00
    </div>

    <div id="final_item_price" class="item_price hidden">20.00</div>

    <div class="product__options">
      <h3>Colour</h3>
      <select name="product option 1" id="select1" class="cartDdlOptions">
        <option value="">Please select</option>
        <option value="5.0000~U">Blue</option>
        <option value="5.0000~U">Orange</option>
      </select>

      <h3>Size</h3>
      <select name="product option 2" id="select2" class="cartDdlOptions">
        <option value="">Please select</option>
        <option value="5.0000~U">Small</option>
        <option value="5.0000~U">Large</option>
      </select>
    </div>

    <div class="buy__btn">
      <a href="#" class="btn">Buy Me</a>
    </div>
  </div>
</div>

jQuery的：

$(document).ready(function(){

  var optionsTotal = null,
  itemPrice = parseFloat($(".item_price").text());

      $(".cartDdlOptions").on('change', function() {

          optionsTotal = new Number(0);
          $.map($(".cartDdlOptions").find('option:selected'), function (el, i) {
              var v = new Number( $(el).val(function(i, v){return v.replace("~U","");}).val());
              optionsTotal += v;
          });

          $(".product__price").html('&pound;' + (optionsTotal + itemPrice).toFixed(2));

      }).change();

      $(".product__price").html('&pound;' + (optionsTotal + itemPrice).toFixed(2));

  ////////////////////////////////////////////////////////
    //start of second part that doesn't work
  ////////////////////////////////////////////////////////

    $(".buy__btn").hide();

    var thisvalue = $(this).find("option:selected").val();

      $(".cartDdlOptions").change(function() {

        if ($(thisvalue) == ""){
            $(".detailProductBuyButton").hide();
        }

        else{      
           $(".buy__btn").show();
        }
    });

  });

工作示例： http://codepen.io/vdecree/pen/nxqts

Answer 1

您可以使用：

var $select = $(".product__options select"); //Cache the select

$select.on('change', function() {
    var valid = true; //Flag
    $select.each(function() {
        return valid = !!this.value //Assign the flag a bolean is valid or not
    });

    $(".buy__btn").toggle(valid); //Display/hide
});

Answer 2

试试这个：

var $options = $(".product_options select");

$options.on('change', function() {
  var selectedCount = 0;
  $options.each(function() {
    if ($(this).val()) {
      selectedCount ++;
    }
  });

  // All select fields have been selected.
  if (selectedCount === $options.length) {
    $(".buy__btn").show();
  } else {
    $(".buy__btn").hide();
  }
});

如果所有选择都有值，则jQuery显示按钮

2 个答案: