title: jqueryui select menu trigger change to re-style item inside selector span
body: <p>I have an issue where I wish to re-style an item inside a selectmenu dropdown list when a new item is dynamically changed by other javascript.</p>
  
  <p>The <code>change</code> event works when I pick the item from the dropdown list by clicking a desired option, but not when I do so via javascript (see last 2 lines).
  The text value changes from "Black" to "White", but the color square still shows the old css.</p>
  
  <pre><code>$("#original-native-dropdown")
  .selectmenu({
      create: function (event, ui) {
          var widget = $(this).selectmenu("widget");
          // pass in style from a &lt;span&gt; inside the native &lt;option&gt; tags used in the selectmenu
          const span = $('&lt;span id="' + this.id + 'selected" class="color-option-selected"&gt; ').html("&amp;nbsp;").appendTo(widget);
          const styleString = $(this).parent().find("select &gt; option:first &gt; span:first").data("style");
          span.attr("style", styleString);
      },
      change: function (event, ui) {
          // works when the user clicks an item in the selection dropdown but not from the outside.
          $("#" + this.id + 'selected').parent().children(":last").attr("style", ui.item.element.children(":first").data("style"));
      }
  })
  .selectmenu("menuWidget")
  .addClass("ui-menu-icons color-option");
  
  $("#original-native-dropdown").val("White");
  $("#original-native-dropdown").selectmenu("refresh").trigger("selectmenuchange");
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/VeQvB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VeQvB.png" alt="The color square changes only when user clicks."></a>
  The color square changes only when user clicks.</p>
  
  <p><a href="https://i.stack.imgur.com/M7rDu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M7rDu.png" alt="The color square is not restyled when selection is changed via javascript."></a>
  The color square is not restyled when selection is changed via javascript.</p>