基于数组的jQuery选择选项在Safari中不起作用

Question

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

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

我设法在Safari以外的所有浏览器中使用了有限的jQuery知识，使它能够正常工作。 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的动态设置方法，而是创建一个data属性。 然后在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'] })