selectmenu with 2 buttons

With "refresh"

by Alexander Farber

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<form>
  <select name="games" id="games"></select>
  <button id="prevGame">&lt;</button>
  <span id="currGame">Loading...</span>
  <button id="nextGame">&gt;</button>
</form>

CSS

button#prevGame,
span#currGame,
button#nextGame,
button#newGame {
  vertical-align: top;
}

select#games {
  width: 250px;
}

JavaScript

var yourGames = [1, 3, 5];
var hisGames = [8, 10, 12, 14];
var selectedIndex = 0;
var selectedGame = yourGames[selectedIndex];

$("#games").selectmenu({ 
	select: function(e, ui){
		//console.log(ui.item);
    selectedIndex = ui.item.index;
    selectedGame = ui.item.value;
    $('#currGame').html('Game #' + selectedGame);
	}
});

$('#prevGame').button().click(function(e) {
  e.preventDefault();
  selectedIndex = Math.max(selectedIndex - 1, 0);
  updateButtons();
});

$('#nextGame').button().click(function(e) {
  e.preventDefault();
  selectedIndex = Math.min(selectedIndex + 1, lastIndex());
  updateButtons();
});

updateMenu();
updateButtons();

/*
setInterval(function() {
  updateMenu();
}, 5000);
*/

function lastIndex() {
  return yourGames.length + hisGames.length - 1;
}

function updateButtons() {
  selectedGame = (selectedIndex < yourGames.length ? yourGames[selectedIndex] : hisGames[selectedIndex - yourGames.length]);
  $('#games option[value="' + selectedGame + '"]').attr('selected',true);
  $('#games').selectmenu('refresh');
  $('#currGame').html('Game #' + selectedGame);
  $('#prevGame').button(selectedIndex == 0 ? "disable" : "enable");
  $('#nextGame').button(selectedIndex == lastIndex() ? "disable" : "enable");
}

function updateMenu() {
  var yourGroup = ['<optgroup label="YOUR TURN">'];
  for (var i = 0; i < yourGames.length; i++) {
    var gameNumber = yourGames[i];
    yourGroup.push(
      '<option value="' +
      gameNumber +
      '">Game #' +
      gameNumber +
      '</option>');
  }
  yourGroup.push('</optgroup>');

  var hisGroup = ['<optgroup label="HIS TURN">'];
  for (var i = 0; i < hisGames.length; i++) {
    var gameNumber = hisGames[i];
    hisGroup.push(
      '<option value="' +
      gameNumber +
      '">Game #' +
      gameNumber +
      '</option>');
  }
  hisGroup.push('</optgroup>');

  console.log(yourGroup);
  console.log(hisGroup);

  $("#games").empty()
    .append(yourGroup.length > 2 ? yourGroup.join('') : '')
   ...