This is interesting. I'm working on a Wordpress site and there are 2 dropdowns: 1- select a maker 2 - select a model

If I use the mouse to select the maker, the models are filtered according to the maker. That's working fine.

I have been requested to auto fill the dropdown with the maker, which I already did with the following code:

On the menu, I have an onclick(spage) action on the link which will call the function below. The console log is showing the right values.

function spage() {
   var valueToFind= '1';
   var option;

   var dd = document.getElementById('device_manufacturer');
      for (var i = 0; i < dd.options.length; i++) {
       if (dd.options[i].value === valueToFind) {
           dd.selectedIndex = i;
           var opt = dd.options[dd.selectedIndex];
           console.log( opt.value );
           console.log(i);
        break;
       }
     }                    
}

With this function the maker is filled, but is not filtering the second dropdown with the models.

So, the maker option needs to be clicked and not just found and display.

I'm struggling to make that work and any help will be great.