Let me best explain this. I have a generated form that has event listeners, so if I am to change an option from the dropdown it causes a change to happen lower down on the page based on the selection.
When I inspect the dropdown, I see it has a “bubbling” event attached to it. All of the dropdowns on the form show this:
function(e) {
e.preventDefault(), e.stopImmediatePropagation();
let a = new Array;
const o = _.closest(".thpb_combo_p_grid_pvariants");
o.querySelectorAll(".thpb_combo_p_grid_variant_select").forEach(function(t) {
a.push(t.options[t.selectedIndex].value)
}), t(o, a)
}
I am using a jquery Pretty Dropdowns script to use CSS divs instead. The dropdowns get created successfully and everything looks great, but the event no longer fires when I’m selecting options in the new dropdown.
Not sure if there is a way to get the hidden select box to fire the event each time there is a change.
Here is another piece of code from the 3rd party script. My code should cause a “change” to trigger on the thpb_combo_p_grid_variant_select class, but am not seeing this event get fired by the change.
document.querySelector(".thpb_combo_p_grid_variant_select") && document.querySelectorAll(".thpb_combo_p_grid_variant_select").forEach(function(_) {
_[s]("change", function(e) {
e.preventDefault(), e.stopImmediatePropagation();
let a = new Array;
const o = _.closest(".thpb_combo_p_grid_pvariants");
o.querySelectorAll(".thpb_combo_p_grid_variant_select").forEach(function(t) {
a.push(t.options[t.selectedIndex].value)
}), t(o, a)
}), _.dispatchEvent(new Event("change"))
})
So did the class names change on your elements, preventing closest and querySelectorAll from finding their targets?
Do the divs listen for changes on the underlying dropdowns to update themselves?
The top dropdown is the one converted for testing. I have the select still visible to show that it is functioning as would expect, except when the change is made by jquery instead of manually.
If you change the select itself to “Full”, you will see the price change below, as it should. If you change the dropdown back to “California King”, you will see the Select Box update to California King, so triggering a change, but not change to the price, showing that the form is not recognizing the Change event for some reason.
right, so the new quasi-select isnt firing the change event on the underlying select because… I’m not sure why. The script LOOKS like it tries to fire the change event on the select… $select.trigger('change'); (line 184)
and it definitely gets to that line, and $select is the correct element, and the element has a listener bound to change…
could possibly be because the events arent being bound through jquery? Bit of an odd circumstance. I can get it to fire if i use $select[0].dispatchEvent instead, but that feels like a kludge more than a solution…