JQuery UI selectmenu: Why doesn't the "select" event fire?

Question

I have a problem in the project, so I tried this on the violin. I am trying to activate selectmenu selection dynamically. Why is the event selectthat I defined when initializing selectmenu only after I made a manual selection?

I know that this is possible by starting$("#myselect").on("selectmenuselect") , but why doesn’t it work as suggested by the API>?

$(function () {
   $("#myselect").selectmenu({
       select: function () {
           alert("ok");
       }
   });
   setTimeout(function () {
       $("#myselect").val("option4");
       $("#myselect").selectmenu("refresh");
       $("#myselect").trigger("selectmenuselect");
    }, 1000);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<select id="myselect">
  <option value="option1" selected>option 1</option>
  <option value="option2">option 2</option>
  <option value="option3">option 3</option>
  <option value="option4">option 4</option>
</select>

Run code

Answer 1

Something like this should do the trick:

$(function () {      
  
    $("#myselect").selectmenu().on("selectmenuselect", function (event, ui) {
         console.log(ui);
    });
  
   setTimeout(function () {
       $("#myselect").val("option4");
       $("#myselect").selectmenu("refresh");
       $("#myselect").trigger("selectmenuselect",$("#myselect"));
    }, 1000);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<select id="myselect">
  <option value="option1" selected>option 1</option>
  <option value="option2">option 2</option>
  <option value="option3">option 3</option>
  <option value="option4">option 4</option>
</select>

Run code

Have a nice day!