JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<select id="test1" class="ui dropdown">
    <option value="">Select an option...</option>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
</select>

<select id="test2" class="ui dropdown">
    <option value="">Select an option...</option>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
</select>

CSS

body {
    padding: 1em;
}

JavaScript

//declare it once universally.
$('.ui.dropdown').dropdown();

//abstracted function
function changeValue(dropdownID,value){
    $('.ui.dropdown').has(dropdownID).dropdown('set selected',value);
}

//changes the value 3 seconds after page load
setTimeout(function(){
    changeValue('#test1','A');
},3000);

//changes the value 6 seconds after page load
setTimeout(function(){
    changeValue('#test2','B');
},6000);