下拉菜单转换为单选按钮，不再触发特定功能 [英] Dropdown converted to radio buttons, no longer triggering specific function

问题描述

我正在构建现有的woocommerce wordpress扩展，并将产品变化(大小，颜色等)下拉菜单转换为单选框.棘手的是，当用户从下拉列表中选择一个选项时，它会触发一些内容，这些内容会通过ajax自动更新产品库存和价格.

I'm building off an existing woocommerce wordpress extension, and I'm converting the product variation (size, color etc) dropdown menus into radio boxes. The trickiness is that when a user selects an option from the drop-down list, it triggers something that automatically updates the product inventory and price via ajax.

我用它来将输入转换成收音机(来自此处) :

I used this to convert the inputs into radios (from here):

$('.variations select').each(function(i, select){
    var $select = jQuery(select);
    $select.find('option').each(function(j, option){
        var $option = jQuery(option);
        // Create a radio:
        var $radio = jQuery('<input type="radio" />');
        // Set name and value:
        $radio.attr('name', $select.attr('name')).attr('value', $option.val());
        // Set checked if the option was selected
        if ($option.attr('selected')) $radio.attr('checked', 'checked');
        // Insert radio before select box:
        $select.before($radio);
        $radio.wrap('<div class="vari-option fix" />');
        // Insert a label:
        $radio.before(
          $("<label />").attr('for', $select.attr('name')).text($option.text())
        );
    });

然后我就用这个

$(':radio').click(function(){
   $(this).parent().parent().find('label').removeClass('checked');
   $(this).siblings('label').addClass('checked');
   $choice = $(this).attr('value');
   $('.variations select option[value=' + $choice + ']').attr('selected',true);
});

这样当选择了无线电，它的反射镜上的下拉选项的情况下.效果很好，但不会触发产品信息的刷新.我的猜测是，更改下拉选项的选定"属性与实际单击同一选项之间有区别.关于什么事件的任何猜测都可能触发我没有考虑的那个ajax函数?理想情况下不涉及修改woocommerce原始代码的解决方案吗?我尝试在选择选项上使用.click()，但没什么区别.

So that when a radio is selected, it mirrors the event on the dropdown option. That works fine, but it's not triggering the refresh of the product info. My guess is there's a difference between changing the 'selected' attribute of a dropdown option and physically clicking on the same option. Any guess at what event might be triggering that ajax function that I'm not taking into account? And a solution that ideally doesn't involve modifying woocommerce's original code? I've tried using .click() on the select option but it made no difference.

推荐答案

以编程方式更改元素的值不会触发change事件，并且我认为以编程方式将selected属性/属性设置为<option>也不会触发包含<select>元素的change事件.

Programmatically changing the value of an element doesn't trigger the change event, and I would assume that programmatically setting the selected attribute/property on an <option> also wouldn't trigger the change event on the containing <select> element.

幸运的是，您可以使用jQuery以编程方式轻松触发该事件:

Fortunately, you can easily trigger that event programmatically using jQuery:

$('.variations select option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');

.parent()调用返回一个包含<select>元素的jQuery对象，然后.trigger('change')触发绑定到该对象上change事件的所有事件处理程序.

The .parent() call returns a jQuery object containing the <select> element, then .trigger('change') triggers any event handlers bound to the change event on that object.

这篇关于下拉菜单转换为单选按钮，不再触发特定功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！