How do I set the form dropdown value through javascript?

Hey Isak Viste - 

Thanks for posting such a thoroughly documented answer!

Manipulating dropdowns in JavaScript can be a bit tricky due to the way the DOM updates the state of <select> elements. Here are a few steps and tips that might help resolve the issue:

1. Ensure Binding is Correct: Confirm that your event listeners are bound correctly and that no other JavaScript code is interfering with the dropdown's behavior.

2. Use selectedIndex: Instead of setting dropdown.value, try using dropdown.selectedIndex. This property reflects the index of the first or last selected <option> element and is a 0-based number.

3. Prevent Default Behavior: To ensure that selecting the dropdown doesn't trigger any other behavior that might be conflicting with your JavaScript, use event.preventDefault() in your event listener before any other logic.

4. Force a Redraw: Sometimes, forcing a redraw of the element can help the DOM reflect the changes made by JavaScript. This can be done by hiding and showing the dropdown, or by triggering a reflow/repaint.

Here's a revised version of your event listener that uses selectedIndex:

dropdown.addEventListener("change", function (event) {
    if (event.target.value !== '12345') {
        return;
    }
    
    event.preventDefault(); // Prevent any default behavior
    event.stopPropagation(); // Stop the event from propagating

    Swal.fire({ /* ... */ }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = "/hc/signin";
        } else {
            // Find the index of the previous value
            const previousIndex = Array.from(dropdown.options).findIndex(option => option.value === previousForm);

            if (previousIndex >= 0) {
                // Set the selectedIndex to the previous index
                dropdown.selectedIndex = previousIndex;
            } else {
                // If the previousForm was not found, clear the selection or set it to a default
                dropdown.selectedIndex = -1; // This will deselect all options
            }

            // Force a redraw of the dropdown if needed
            dropdown.style.display = 'none';
            dropdown.offsetHeight; // Trigger a reflow
            dropdown.style.display = '';

        }
    });
}, true);

If this doesn't solve the problem, consider the following:

• Check for other event listeners: There might be other event listeners attached to the dropdown that interfere with your code.
• Check for CSS/Styling Issues: Sometimes, CSS can affect the visual state of a dropdown. Make sure there is no CSS that changes the visual state of options based on their selected state.

Thank you Brandon, I appreciate you taking the time to write such a thorough detailed response! 
Unfortunately, none of the tricks seems to work in my case.

The issue, as far as I can tell, is that Zendesk uses some trick to hide the select field behind an <a> element with a lot of js to make it work and look like a select field. Hence when I change the select field through code, it is not the same way as if a user interacted with it.

If I show the select field using a display = "", I can see that select field is right under the other field and looks correct:
But I can't figure out how to update the <a> nesty-input field that is above the select field.

I have tried to remove the <a> nesty-input field and just show the select field, but that breaks Zendesks submit form code that relies on that field for it's logic. This also explains why I had some weird cases I mentioned previously, as its role is not only visually, but also influences what form is being submitted (instead of the select field which I thought was the decider).

I've tried redrawing both the hidden select field, and the nesty-input a element but neither works. I cannot just change the inner html of the nesty-input a element either, as though it will then look correct, programmatically it is not. It keeps the selected form/index in code somewhere hidden.
This is all from trying and debugging in the console, and the little I could understand from the obfuscated code in the "hc_enduser-xxxx.js" file

Any thoughts on the matter?

Hi Isak Viste - 

When you programmatically change the <select> element's value, the visual components (like the <a> element you mentioned) do not automatically update because they have event listeners that synchronize their state based on user interactions, not programmatic changes.

To manipulate such components, you often need to trigger the events or call the methods provided by the library itself to update the visual component and synchronize it with the <select> element. If Zendesk uses a library for this, you would need to find out which one it is and use its API to update the component.

Here is a general approach that might work if your guide uses a common library like "Chosen":