jQuery UI selectmenu と 2 つのボタンで jsFiddle を試してみてください。
2 つのボタンprevGame
を使用して、現在選択されているゲーム番号を追跡する変数nextGame
を変更できます。selectedIndex
残念ながら、jQuery UI selectmenu docには、現在選択されているアイテムを設定および取得する方法が説明されていません( span を更新できるようにするため)。currGame
説明してください: jQuery UI selectmenu で選択した項目を設定および取得する方法は?
HTML コード:
<form>
<select name="games" id="games"></select>
<button id="prevGame"><</button>
<span id="currGame">Loading...</span>
<button id="nextGame">></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
}
アップデート:
の代わりに使用する新しい jsFiddleを用意しましたが、まだいくつかの問題があります。selectmenu("refresh")
selectmenu("destroy")