1

I need to use vanilla javascript to simulate a change in a click and selection on a dropdown menu.

I have a dropdown menu (it's wordpress' template selector), it looks something like this:

<select class="components-select-control__input" id="inspector-select-control-0">
    <option value="">Default template</option>
    <option value="404.php">home page/404</option>
    <option value="article.php">article</option>
</select>

I want to change the selection. I at first tried things like:

selector = document.querySelector("select#inspector-select-control-0");
selector.value = 'article.php'

But this doesn't work, it doesn't take. It changes the value of the select, but, the changed selection isn't recognized and the little template slug that's behind the dropdown (see image) doesn't update as it would on a human selection change.

I then tried to loop through them like this:

Array.from(document.querySelector("select#inspector-select-control-0").options).forEach(function(option) {
    if ('article.php' === option.value){
        option.selected = true;
    }
});

But again, it doesn't work. The value in the form is changed but the change isn't recognized & the template isn't updated as it would be when a user clicks on the dropdown and the template doesn't work.

The only thing that seems to work is a human click on the dropdown and a selection, how do I simulate that? Similar questions have been asked before, but mostly they are using jQuery. I think the closest to what I want to do is Simulate dropdown menu selection javascript But it's unclear from the answer how I should trigger a change.

Am I missing something extremely obvious here?

this image shows the template dropdown and the template behind it.

user18102663
  • 23
  • 3
  • 1
    Also note that you cannot _fully_ simulate user input this way because your synthesized event will not have the `isTrusted` flag. If a page explicitly checks for that to prevent people from automating it, it won't work. But in normal circumstances it should be fine. – CherryDT Jul 27 '23 at 07:56
  • 1/2 ... Since the suggested and referred thread ... _"How can I trigger an onchange event manually?"_ ... does not help the OP in terms of always assuring a correct change event handling due to not creating a correct change-type event-object, the next provided example does demonstrate a correct implementation of a _"manually set and then enforced 'change' event handling"_ ... `function handleSelectionChange({ currentTarget }) { console.log({ value: currentTarget.value }); }` `const elmSelect = document.querySelector('#inspector-select-control-0');` – Peter Seliger Jul 27 '23 at 08:28
  • 2/2 ... `const evtChange = Object.defineProperties(new Event('change'), { target: { value: elmSelect }, currentTarget: { value: elmSelect } });` `elmSelect.addEventListener('change', handleSelectionChange);` `elmSelect.selectedIndex = [...elmSelect.options].findIndex( ({ value }) => value === 'article.php' );` `elmSelect.dispatchEvent(evtChange);` – Peter Seliger Jul 27 '23 at 08:28

0 Answers0