JSFiddle - React, Tailwind, and code Playground

HTML

<p>When you select a new value from the dropdown, the change event is fired automatically.</p>
<p>However if you set the value programmatically, it doesn't get called.</p>
<select id="group">
    <option value="">All</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<button id='reset'>set to 5</button>

CSS

p {
    font-family: arial;
}

JavaScript

var $select = $('#group');
var $button = $('#reset');
    
$select.change(function (e){
    console.log('Change event called');
});

$button.click(function (e){
    $select.val(5);
});