jquery - selectmenu('refresh') が「Uncaught TypeError」でクラッシュします

Question

Wordpress の Web サイトで、Google CDN の jQuery 3.1.0 と jQuery UI 1.11.4 を使用しています。

function my_enqueue_scripts() 
{
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_deregister_script ( 'jquery' );
    wp_deregister_script ( 'jquery-ui' );
    wp_deregister_script ( 'jquery-migrate' );

    wp_enqueue_style( 'jquery-ui-smoothness', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css' );
    wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js' );
    wp_enqueue_script( 'jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js' );
    wp_enqueue_script( 'pixi-script', '//cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js' );
    wp_enqueue_script( 'utils-script', '/words/Utils.js' );
    wp_enqueue_script( 'small-tile-script', '/words/SmallTile.js' );
    wp_enqueue_script( 'big-tile-script', '/words/BigTile.js' );
    wp_enqueue_script( 'words-script', '/words/Words.js' );
}

そして、jQuery UI selectmenuを作成し、次のテスト コードで更新しようとすると、

HTML:

<select id="gamesMenu">

JavaScript:

"use strict";

jQuery(document).ready(function($) {

    console.log('selectmenu 1');
    $('#gamesMenu').selectmenu({ disabled: true });
    console.log('selectmenu 2');
    $('#gamesMenu').selectmenu('refresh');          // THIS CRASHES
    console.log('selectmenu 3');
});

残念ながら、次のように失敗します。

jQuery.Deferred exception: Cannot read property 'eq' of undefined TypeError: Cannot read property 'eq' of undefined
    at _getSelectedItem (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:12513:24)
    at ._getSelectedItem (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:415:25)
    at refresh (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:12362:40)
    at .refresh (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:415:25)
    at HTMLSelectElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:508:39)
    at Function.each (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:368:19)
    at jQuery.each (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:157:17)
    at jQuery.$.fn.(anonymous function) [as selectmenu] (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:494:9)
    at HTMLDocument.<anonymous> (http://slova.de/words/Words.js?ver=4.5.3:400:25)
    at mightThrow (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:3508:29) undefined

1.11.4/jquery-ui.jsの次のコードを参照します。

_getSelectedItem: function() {
    return this.menuItems.eq( this.element[ 0 ].selectedIndex );
},

Mac 用の Google Chrome ブラウザーのスクリーンショットは次のとおりです。

これを修正または回避する方法を教えてください。

実際の JavaScript コードでより多くのコンテキストを提供するために、WebSocket 接続を介して JSON データを繰り返し取得し、HTML 選択メニューを更新する必要があります (したがって、次を呼び出す必要がありますselectmenu('refresh')。

function updateMenu() {
        var yourGroup = ['<optgroup label="YOUR TURN">'];
        var hisGroup = ['<optgroup label="HIS TURN">'];

        for (var game in games) {
                var myturn = (game.played1 < game.played2);
                if (myturn) {
                         yourGroup.push(
                                '<option value="' +
                                game.gid +
                                '">Game #' +
                                game.gid +
                                '</option>'
                        );
                } else {
                        hisGroup.push(
                                '<option value="' +
                                game.gid +
                                '">Game #' +
                                game.gid +
                                '</option>'
                        );
                }
        }

        yourGroup.push('</optgroup>');
        hisGroup.push('</optgroup>');

        $('#gamesMenu')
                .empty()
                .append(yourGroup.length > 2 ? yourGroup.join('') : '')
                .append(hisGroup.length > 2 ? hisGroup.join('') : '')
                .selectmenu('refresh')     // THIS CRASHES
                .selectmenu('option', 'disabled', 
                    yourGroup.length <= 2 && hisGroup.length <= 2);
}

$('#gamesMenu').selectmenu({ 
    disabled: true });
    select: function(e, ui) {
            updateButtons();
            updateBoard();
});