Question

我目前正致力于Woocommerce，使用其产品变体。现在，我必须在select元素上进行自定义行为。点击此select，它会打开一个模态窗口，当我点击其中的一个元素时，它会根据我点击的内容更改原始的select值。

所以：

$('[data-remodal-id=format-modal] .format-list li').on('click', function (e) {
    e.preventDefault();
    var index = $(this).index()+1;
    var modal = $('[data-remodal-id=format-modal]').remodal();
    modal.close();
    var value = $('#format option:eq('+index+')').val();
    $('#format').val('');
    $('#format option:eq('+index+')').attr('selected', 'selected');

    $('#format').val(value);
    $('.variations select').not('#format').find('option:eq(0)').attr('selected', 'selected');

    setTimeout(function () {
      $('.variations select').trigger('change');
    }, 300);
});

我确信这可以完成这项工作，但事实并非如此：没有任何事情会触发向Woocommerce说明更新变体ID的事件。

所以，我做了一些肮脏的东西让事情有效：

$(document).on('change', '#format', function () {
      console.log('format change 2');
      var value = $( ".variation_id" ).val();
      $(document).trigger('woocommerce_variation_select_change');
      $(document).trigger('show_variation');
      $( ".variation_id" ).val(' ');
      $( ".variation_id" ).val(value).change().trigger('change');
      $( ".variations_form" ).trigger( "show_variation");
      $( ".variations_form" ).trigger( "woocommerce_variation_select_change");
      $('.variations select').not('#format').each(function () {
        var value = $(this).val();
        $(this).val(' ');
        $(this).val(value);
        $(this).trigger('change');
      });
    });

但上面的代码中没有任何内容可行，但我的console.log('format change 2')按预期工作。

有什么想法吗？

Woocommerce：用JS改变变化选择不会引发变化更新

0 个答案: