Изменение триггера меню выбора jqueryui для изменения стиля элемента внутри диапазона селектора

Question

У меня проблема с изменением стиля элемента внутри выпадающего списка selectmenu, когда новый элемент динамически изменяется другими javascript.

Событие change работает, когда Я выбираю элемент из выпадающего списка, щелкая нужную опцию, но не тогда, когда я делаю это с помощью javascript (см. Последние 2 строки). Значение текста изменяется с «Черного» на «Белый», но цветной квадрат все еще показывает старый css.

$("#original-native-dropdown")
.selectmenu({
    create: function (event, ui) {
        var widget = $(this).selectmenu("widget");
        // pass in style from a <span> inside the native <option> tags used in the selectmenu
        const span = $('<span id="' + this.id + 'selected" class="color-option-selected"> ').html("&nbsp;").appendTo(widget);
        const styleString = $(this).parent().find("select > option:first > 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");

Цветной квадрат изменяется только когда пользователь щелчки.

Цветной квадрат не изменен при изменении выбора с помощью javascript.