How to dynamically change selected option of drop-down list?

So, I know that I have fully working solution if clean html+js is used (see gif)

​
here is my js:

var selectEl = document.getElementById('element_1');
var element_2 = document.getElementById('element_2');

selectEl.onchange = function () {
 switch (selectEl.value) {
 case '1':
 element_2.value = "1";
 console.log('element_2.value: ', element_2.value);
 break;

 case '2':
 element_2.value = "2";
 console.log('element_2.value: ', element_2.value);
 break;
 case '3':

 element_2.value = "3";
 console.log('element_2.value: ', element_2.value);
 break;

 default:
 element_2.value = "";
 }

}

​
But when I'm trying to recreate same things in CF6, the target drop-down doesn't react, despite the element_2.value is set correctly (output to console shows correct values).
​
Question is: how to change the drop-box selected option dynamically, using js?
​
Simple 2-field+js form attached for playground purposes.
​
Thanks in advance!
​
​[file=12705]2_dropdowns_test_23_Feb_2020_01_43_21.cf6bak[/file]

It's using Semantic UI so you can't just use JS the way you are.
​
And there are field events you can utilise instead of all this custom stuff.

I need all this custom stuff because I have pre-loaded values for pre-filled form, which you can choose from drop-down, and then multiple fields are pre-filled according to what you choose. No "natural" way to do so using built-in CF6 capabilities.
​
So, what's that Semantic UI story? Any meaningful details?

Thanks to pointing to semantic.ui
I've got js working like this (for those who's digging into problem, please, note that actual "select" id is wrapped around by symantic.ui "dropdown") :

window.onload = function () {

var selectEl = document.getElementById('element_1');
var element_2 = document.getElementById('element_2');

selectEl.onchange = function () {
                    $(element_2.parentNode).dropdown('set selected', selectEl.value) // you can pass any value
    }
}