如何使用 2 个按钮遍历 jQuery UI selectmenu？

Question

请尝试the jsFiddle with jQuery UI selectmenu and 2 buttons。

在 2 个按钮 prevGame 和 nextGame 的帮助下，我可以更改 selectedIndex 变量来跟踪当前选择的游戏号码。

不幸的是，jQuery UI selectmenu 文档没有解释如何 set 和 get（这样我就可以更新跨度 currGame) 当前选中的项目：

请说明：如何在jQuery UI selectmenu中设置和获取选中项？

HTML-代码:

<form>
  <select name="games" id="games"></select>
  <button id="prevGame">&lt;</button>
  <span id="currGame">Loading...</span>
  <button id="nextGame">&gt;</button>
</form>

JavaScript-代码:

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

$("#games").selectmenu();

// emulate repeating server responses
setInterval(function() {
  updateMenu();
}, 5000);

$('#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();
});

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

function updateButtons() {
  $('#currGame').html('selectedIndex=' + selectedIndex); // TODO: change to "Game #"
  $('#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];
    var selectedTag = (i == selectedIndex ? 'selected="selected"' : '');
    yourGroup.push(
      '<option ' +
      selectedTag +
      ' 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];
    var selectedTag = (i - yourGames.length == selectedIndex ? 'selected="selected"' : '');
    hisGroup.push(
      '<option ' +
      selectedTag +
      ' value="' +
      gameNumber +
      '">Game #' +
      gameNumber +
      '</option>');
  }
  hisGroup.push('</optgroup>');

  $("#games").selectmenu('destroy')
    .empty()
    .append(yourGroup.length > 2 ? yourGroup.join('') : '')
    .append(hisGroup.length > 2 ? hisGroup.join('') : '')
    .selectmenu(); // TODO: select the game at selectIndex
}

更新：

我已经使用 selectmenu("refresh") 而不是 selectmenu("destroy") 准备了 a newer jsFiddle，但它仍然存在一些问题。

Answer 1

这可以用更好的方式完成，但以下代码提供了您所要求的：

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

$("#games").selectmenu();

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

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

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

function updateButtons() {
    var selectedText = $("#games option:selected").text();
  $('#currGame').html(selectedText);
  $('#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];
    var selectedTag = (i == selectedIndex ? 'selected="selected"' : '');
    yourGroup.push(
      '<option ' +
      selectedTag +
      ' 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];
    var selectedTag = (yourGames.length + i == selectedIndex ? 'selected="selected"' : '');
    hisGroup.push(
      '<option ' +
      selectedTag +
      ' value="' +
      gameNumber +
      '">Game #' +
      gameNumber +
      '</option>');
  }
  hisGroup.push('</optgroup>');

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

  $("#games").selectmenu('destroy')
    .empty()
    .append(yourGroup.length > 2 ? yourGroup.join('') : '')
    .append(hisGroup.length > 2 ? hisGroup.join('') : '')
    .selectmenu();
}

我还更新了你的Fiddle，这样你就可以玩了。 https://jsfiddle.net/q07uarwr/35/

Answer 2

我试了一下，更新和显示文本都成功了。但是接下来您唯一需要找到的是一旦选定的索引更改为下拉列表中的下一个 <option> 组，如何设置值。

这是主要变化：

function updateButtons() {
  var gamesOptions = $('#games option');
  $('#currGame').html("<span>" + $(gamesOptions[selectedIndex]).text() + "</span>");
  $("#games").val(selectedIndex).change();
  $('#prevGame').button(selectedIndex == 0 ? "disable" : "enable");
  $('#nextGame').button(selectedIndex == lastIndex() ? "disable" : "enable");
  updateMenu();
}

https://jsfiddle.net/q07uarwr/34/

Answer 3

jQuery 和 jQuery UI 无法直接设置 select 菜单的 selected 索引。您可以使用纯 javascript 方式来设置 selected 索引。此外，我假设您想在每次 select 菜单更改时更改按钮之间的文本。你可以这样做：

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

setInterval(function() {
  updateMenu();
  updateCurrentGame();
  updateButtons();
}, 5000);

$("#games").selectmenu();

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

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

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

function updateButtons() {
  $('#prevGame').button(selectedIndex == 0 ? "disable" : "enable");
  $('#nextGame').button(selectedIndex == lastIndex() ? "disable" : "enable");
}

// Update the select menu when prev & next buttons are pressed
function updateCurrentGame() {
  var selectedText = $($("select#games option")[selectedIndex]).text();
  $('#currGame').html(selectedText);
  // pure js vay to set selected index
  $("#games")[0].selectedIndex = selectedIndex;
  $("#games").selectmenu("refresh");
}

// Update the selected index every time the select menu is changed manually
$("#games").on("selectmenuchange", function(e, ui) {
  console.log(ui);
  selectedIndex = ui.item.index;
  var selectedText = ui.item.element.text();
  $('#currGame').html(selectedText);
  updateButtons();
})

function updateMenu() {
  var yourGroup = ['<optgroup label="YOUR TURN">'];
  for (var i = 0; i < yourGames.length; i++) {
    var gameNumber = yourGames[i];
    var selectedTag = (i == selectedIndex ? 'selected="selected"' : '');
    yourGroup.push(
      '<option ' +
      selectedTag +
      ' 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];
    var selectedTag = (yourGames.length + i == selectedIndex ? 'selected="selected"' : '');
    hisGroup.push(
      '<option ' +
      selectedTag +
      ' value="' +
      gameNumber +
      '">Game #' +
      gameNumber +
      '</option>');
  }
  hisGroup.push('</optgroup>');

  $("#games").selectmenu('destroy')
    .empty()
    .append(yourGroup.length > 2 ? yourGroup.join('') : '')
    .append(hisGroup.length > 2 ? hisGroup.join('') : '')
    .selectmenu();
}

button#prevGame,
span#currGame,
button#nextGame,
button#newGame {
  vertical-align: top;
}
select#games {
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />

<form>
  <select name="games" id="games"></select>
  <button id="prevGame">&lt;</button>
  <span id="currGame">Loading...</span>
  <button id="nextGame">&gt;</button>
</form>

如何使用 2 个按钮遍历 jQuery UI selectmenu？

How to iterate through jQuery UI selectmenu by using 2 buttons?

javascript

jquery

jquery-ui

select-menu

jquery-ui-selectmenu