Question

我正在创建一个脚本，从数组中选择最接近的最高值，然后在隐藏的选择中选择适当的选项。这完全基于用户输入。

当用户点击提交按钮时，该脚本需要从隐藏的选择中获取值。

我设法在除Safari之外的所有浏览器中使用（我有限的jQuery知识）。不知何故，Safari总是选择第一个选项。

脚本本身选择正确的值。我可以在safari控制台中看到选择了正确的选项。但是，当单击提交按钮时，它仍然会选择第一个选项。

我已经读过我需要使用$(document).on('change'....但是当我按下按钮时需要抓取值。

所以我拥有的是：

function calculate() {
  /* create array with variants */
  var variants = [];
  $('#product_configure_variants').each(function() {
    variants.push({
      value: $(this).val(),
      size: $(this).data('size'),
      price: $(this).data('price'),
      priceIncl: $(this).data('priceincl')
    });
  });

  /* get highest nearest variant from array if ontwMaat doesn't match */
  var goal = ontwMaat; // a value like 500 or 645 etc
  var closest = null;
  var match = $.grep(variants, function(e) {
    return e.size == goal;
  });
  if (match.length == 0) {
    var minDiff = Number.MAX_SAFE_INTEGER;

    for (var index in variants) {
      var valueObject = variants[index];
      if (valueObject.size > goal) {
        var diff = Math.abs(valueObject.size - goal);
        if (diff < minDiff) {
          closest = valueObject;
          minDiff = diff;
        }
      }
    }
  } else if (match.length == 1) {
    closest = match[0]
  }

  // I first unselect all
  $('#product_configure_variants option').removeAttr("selected");

  // Then I select matching value
  $('#product_configure_variants option[value="' + closest['value'] + '"]').attr("selected", "selected")

  // Do I need this below????	
  //  $('#product_configure_variants').trigger('change');

  // .... more code
}

$(function() {
  $('.addToCartTest').on('click', function(e) {
    e.preventDefault();
    // .... more code  .....
    var mainFormVariant = $('#product_configure_variants').find('option:selected').val();
    alert(mainFormVariant)
  })
})

// I tried following
$(document).on('change', "#product_configure_variants", function() {
  alert($(this).val())
});

var mainFormVariant = $('#product_configure_variants option:selected').val();
var mainFormVariant = $('#product_configure_variants').find('option:selected').val();

///     .... more code  .....

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="product_configure_variants" name="variant" style="display:none;">
  <option data-size="50 " data-price="3.72" data-priceincl="4.5" value="128428226">50 mm</option>
  <option data-size="100 " data-price="5.5" data-priceincl="6.65" value="128428229">100 mm</option>
  <option data-size="150 " data-price="7.27" data-priceincl="8.8" value="128428232">150 mm</option>
  <option data-size="200 " data-price="9.09" data-priceincl="11" value="128428235">200 mm</option>
  <option data-size="250 " data-price="10.87" data-priceincl="13.15" value="128428238">250 mm</option>
</select>
<a class="addToCartTest" data-loading-text="One moment!"><i class="fa fa-shopping-cart"></i>Submit</a>

Answer 1

我通过删除select的动态set方法来修复我自己的问题，而是创建了一个数据属性。然后在doc.ready中，我只获取数据属性值，并且全部...

 // I first unselect all
 // $('#product_configure_variants option').removeAttr("selected");

  // Then I select matching value
//  $('#product_configure_variants option[value="' + closest['value'] + '"]').attr("selected", "selected")

/* set data attr in submit btn */
$('.addToCartTest').attr({ 'data-mfv': closest['value'] })

基于数组的jQuery select选项在Safari

1 个答案: