title: selectmenu('refresh') crashes with "Uncaught TypeError"
body: <p>On a Wordpress website I am using jQuery 3.1.0 and jQuery UI 1.11.4 from Google CDN:</p>
  
  <pre><code>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' );
  }
  </code></pre>
  
  <p>And when I create a <a href="https://jqueryui.com/selectmenu/" rel="nofollow noreferrer">jQuery UI selectmenu</a> and then try to <a href="http://api.jqueryui.com/selectmenu/#method-refresh" rel="nofollow noreferrer">refresh</a> it with the following test code -</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;select id="gamesMenu"&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>"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');
  });
  </code></pre>
  
  <p>then unfortunately it fails with:</p>
  
  <pre><code>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.&lt;anonymous&gt; (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.&lt;anonymous&gt; (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
  </code></pre>
  
  <p>Which refers to the following code in <a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" rel="nofollow noreferrer">1.11.4/jquery-ui.js</a>:</p>
  
  <pre><code>_getSelectedItem: function() {
      return this.menuItems.eq( this.element[ 0 ].selectedIndex );
  },
  </code></pre>
  
  <p>Here the screenshot in Google Chrome browser for Mac:</p>
  
  <p><a href="https://i.stack.imgur.com/famvr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/famvr.png" alt="screenshot"></a></p>
  
  <p>How to fix or workaround this please?</p>
  
  <p>To give more context in my real JavaScript code I repeatedly get JSON data via WebSocket connection and have to update the HTML select menu (and thus to call <code>selectmenu('refresh')</code>:</p>
  
  <pre><code>function updateMenu() {
          var yourGroup = ['&lt;optgroup label="YOUR TURN"&gt;'];
          var hisGroup = ['&lt;optgroup label="HIS TURN"&gt;'];
  
          for (var game in games) {
                  var myturn = (game.played1 &lt; game.played2);
                  if (myturn) {
                           yourGroup.push(
                                  '&lt;option value="' +
                                  game.gid +
                                  '"&gt;Game #' +
                                  game.gid +
                                  '&lt;/option&gt;'
                          );
                  } else {
                          hisGroup.push(
                                  '&lt;option value="' +
                                  game.gid +
                                  '"&gt;Game #' +
                                  game.gid +
                                  '&lt;/option&gt;'
                          );
                  }
          }
  
          yourGroup.push('&lt;/optgroup&gt;');
          hisGroup.push('&lt;/optgroup&gt;');
  
          $('#gamesMenu')
                  .empty()
                  .append(yourGroup.length &gt; 2 ? yourGroup.join('') : '')
                  .append(hisGroup.length &gt; 2 ? hisGroup.join('') : '')
                  .selectmenu('refresh')     // THIS CRASHES
                  .selectmenu('option', 'disabled', 
                      yourGroup.length &lt;= 2 &amp;&amp; hisGroup.length &lt;= 2);
  }
  
  $('#gamesMenu').selectmenu({ 
      disabled: true });
      select: function(e, ui) {
              updateButtons();
              updateBoard();
  });
  </code></pre>