Jquery selectmenu change the dropdown value
<p>I have a dropdown which i changed with Jquery UI select menu.
I have to change the value using jquery.</p>

<p>I have tried this and its working.</p>

<pre><code>$('#myId').val('someValue');
$('#myId').selectmenu('refresh');
</code></pre>

<p>Its changing the dropdown value but its not calling the change function associated with It.</p>

<p>Please go through the code snippet attached, am triggering an alert when the value changed manually , but if i change through the jquery its just updating the value in jquery select menu , but its not calling the change function.
Please guide me how to do.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#number').selectmenu({
change:function( event, ui ) {alert('Hello')}
});
$('#number').val('3');
$('#number').selectmenu('refresh');</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"&gt;&lt;/script&gt;
&lt;html&gt;
  &lt;head&gt;
  
  
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
   &lt;select name="number" id="number"&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option selected="selected"&gt;2&lt;/option&gt;
      &lt;option value="3"&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
      &lt;option&gt;5&lt;/option&gt;
      &lt;option&gt;6&lt;/option&gt;
      &lt;option&gt;7&lt;/option&gt;
      &lt;option&gt;8&lt;/option&gt;
      &lt;option&gt;9&lt;/option&gt;
      &lt;option&gt;10&lt;/option&gt;
      &lt;option&gt;11&lt;/option&gt;
      &lt;option&gt;12&lt;/option&gt;
      &lt;option&gt;13&lt;/option&gt;
      &lt;option&gt;14&lt;/option&gt;
      &lt;option&gt;15&lt;/option&gt;
      &lt;option&gt;16&lt;/option&gt;
      &lt;option&gt;17&lt;/option&gt;
      &lt;option&gt;18&lt;/option&gt;
      &lt;option&gt;19&lt;/option&gt;
    &lt;/select&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>)</p>