我正在构建现有的 woocommerce wordpress 扩展,并将产品变体(尺寸、颜色等)下拉菜单转换为单选框。棘手的是,当用户从下拉列表中选择一个选项时,它会触发通过 ajax 自动更新产品库存和价格的功能。
我用它来将输入转换为 radio (来自 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);
});
这样,当选择 radio 时,它会在下拉选项中反射(reflect)事件。这工作正常,但它不会触发产品信息的刷新。我的猜测是,更改下拉选项的“选定”属性和物理单击同一选项之间存在差异。猜猜什么事件可能会触发我没有考虑到的 ajax 函数?理想情况下不涉及修改 woocommerce 原始代码的解决方案?我尝试过在选择选项上使用 .click() 但没有什么区别。
最佳答案
以编程方式更改元素的值不会触发 change
事件,我假设以编程方式设置 selected
<option>
上的属性/属性也不会触发 change
包含<select>
的事件元素。
幸运的是,您可以使用 jQuery 以编程方式轻松触发该事件:
$('.variations select option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');
.parent()
调用返回一个 jQuery 对象,其中包含 <select>
元素,然后 .trigger('change')
触发绑定(bind)到 change
的任何事件处理程序该对象上的事件。
关于javascript - 下拉菜单转换为单选按钮,不再触发特定功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11819604/