Change Select2 with programmatic changes to the original select field

I am using Select2 with another plugin that includes a “reset” button to convert the form back to its initial state. The plugin targets the original select field not the Select2 dropdown. I am wondering how I detect this change to manually revert the Select2 dropdown back to its initial state (the same value as what is selected on the original select field).

The following did not work:
document.getElementById(“originalID”).addEventListener(“input”, …
document.getElementById(“originalID”).addEventListener(“change”, …
$("#originalID").on(“input”, …
$("#originalID").on(“change”, …
$("#originalID").change( …

How does the “reset” button convert the form back to its initial state? Does it somehow record the original state/value of each control in the form and then restore those states/values when the “reset” button is clicked?

If attaching “input” and “change” event handlers didn’t work, then that “reset” feature must not cause either of those events to fire. You need to figure out how the “reset” feature does what it does. Note that the HTML <form> element supports an input/button of type “reset” that does exactly what your “reset” plugin does. There is also a reset() method on the HTMLFormElement. In either case, the <form> element fires a reset event that you should be able to listen for, and in your event listener you can manually reset the Select2 dropdown.

Thank you for your response. I did wind up figuring this out shortly after I posted the question. The plugin was just using the HTML reset method so I added code to listen for that instead of change or input. I apologize for not coming back here sooner to note my findings and taking up your time to respond to my question.

1 Like

Hi, Camden,

No need to apologize. Even if you did figure it out for yourself (congratulations!), someone else might have the same question, so I don’t feel like my time was wasted answering you.

Good luck with the rest of your project!