JavaScriptでセレクトボックス間の項目移動を行う
次のような選択・非選択をボックス間で移動するUIのサンプルです。
JavaScriptのみとjQueryを使ったサンプルになります。
共通のコード
JavaScriptのみとjQueryを使った場合で共通となる部分です。
HTML
UIのHTMLサンプルです。２つのセレクトボックスと移動用のボタンを用意しています。
選択を表示は現在の選択状態を確認するためのボタンです。
hiddenValuesはformで選択値を送りたい場合に利用します。
<div class="row m-3">
<div class="col-md-3">
<div>選択中</div>
<select class="form-select" size="8" id="selectGroup" multiple>
</select>
<div id="hiddenValues"></div>
</div>
<div class="col-md-2 pt-5">
<div class="d-grid gap-3">
<button type="button" class="btn btn-outline-secondary" onclick="moveGroup('unselectGroup', 'selectGroup');"><i class="bi bi-chevron-double-left"></i>追加</button>
<button type="button" class="btn btn-outline-secondary" onclick="moveGroup('selectGroup', 'unselectGroup');">外す<i class="bi bi-chevron-double-right"></i></button>
</div>
</div>
<div class="col-md-3">
<div class="text-muted">非選択</div>
<select class="form-select" size="8" id="unselectGroup" multiple>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="row m-3">
<div class="col-md-3">
<button type="button" class="btn btn-primary" onclick="showSelectValues();">選択を表示</button>
</div>
</div>
script
各ボタンが押下された時にコールされるメソッドです。
function moveGroup(fromId, toId) {
moveSelect(fromId, toId);
updateHiddenParams('hiddenValues', 'values[]', 'selectGroup');
}
function showSelectValues() {
let values = [];
const collection = document.getElementById('hiddenValues').children;
for (let i = 0; i < collection.length; i++) {
values.push(collection[i].value);
}
alert(values);
}
JavaScriptのみで実装
標準のJavaScriptのみで実装する方法です。
function moveSelect(fromId, toId) {
const from = document.getElementById(fromId);
const to = document.getElementById(toId);
const options = from.querySelectorAll('option');
options.forEach(function(option) {
if (option.selected) {
// 選択値の確認.
//console.log(option.value, option.text);
// 要素の移動.
from.removeChild(option);
to.appendChild(option);
}
});
}
/**
* セレクトボックスにある全て値を hidden パラメータに設定する.
* @param {*} hiddenId
* @param {*} hiddenName クエリーの名前. 複数選択がある場合は選択１つでも配列になるよう末尾に[]を付ける. 選択なしの場合は undefinedになる.
* @param {*} selectBoxId
*/
function updateHiddenParams(hiddenId, hiddenName, selectBoxId) {
// 既に hidden が設定済なら削除する.
let hidden = document.getElementById(hiddenId);
while (hidden.firstChild) {
hidden.removeChild(hidden.firstChild);
}
// セレクトボックスの内容を取得.
const options = document.getElementById(selectBoxId).querySelectorAll('option');
// 配列型で hidden を追加する.
for (let i = 0; i < options.length; i++) {
console.log(options[i].value, options[i].text);
let input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', hiddenName);
input.setAttribute('value', options[i].value);
hidden.appendChild(input);
}
}
jQueryで実装
function moveSelect(fromId, toId) {
// 選択値の確認.
//const val = $(`[id=${fromId}]`).val();
//console.log(`${val} move. ${fromId} to ${toId}`);
$(`[id=${fromId}] option:selected`).each(function() {
$(`[id=${toId}]`).append($(this).clone());
console.log($(this).val(), $(this).text());
$(this).remove();
});
}
/**
* セレクトボックスにある全て値を hidden パラメータに設定する.
* @param {*} hiddenId
* @param {*} hiddenName クエリーの名前. 複数選択がある場合は選択１つでも配列になるよう末尾に[]を付ける. 選択なしの場合は undefinedになる.
* @param {*} selectBoxId
*/
function updateHiddenParams(hiddenId, hiddenName, selectBoxId) {
hiddenId = '#' + hiddenId;
selectBoxId = '#' + selectBoxId;
// 既に hidden が設定済なら削除する.
if ($(hiddenId).children().length > 0) {
$(hiddenId).empty();
}
// セレクトボックスの内容を取得.
const groups = $(selectBoxId).children();
// 配列型で hidden を追加する.
for (let i = 0; i < groups.length; i++) {
$(hiddenId).append('<input type="hidden" name="' + hiddenName + '" value="' + groups.eq(i).val() + '">');
}
}
