JavaScriptでセレクトボックス間の項目移動を行う

次のような選択・非選択をボックス間で移動するUIのサンプルです。

セレクトボックス間の項目移動

JavaScriptのみとjQueryを使ったサンプルになります。

共通のコード

JavaScriptのみとjQueryを使った場合で共通となる部分です。

HTML

UIのHTMLサンプルです。2つのセレクトボックスと移動用のボタンを用意しています。
選択を表示は現在の選択状態を確認するためのボタンです。
hiddenValuesformで選択値を送りたい場合に利用します。

<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 クエリーの名前. 複数選択がある場合は選択1つでも配列になるよう末尾に[]を付ける. 選択なしの場合は 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 クエリーの名前. 複数選択がある場合は選択1つでも配列になるよう末尾に[]を付ける. 選択なしの場合は 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() + '">');
    }
}
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

関連コンテンツ

スポンサードリンク

コメント

メールアドレスが公開されることはありません。