selectを変更する前に一旦それでいいか確認するjs #JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <label for="test-select">選択してください:</label>
    <select id="test-select">
        <option value="test1" >test1</option>
        <option value="test2">test2</option>
    </select>
    <!-- モーダル -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <p id="modal-text"></p>
            <button id="confirm-btn">OK</button>
            <button id="cancel-btn">キャンセル</button>
        </div>
    </div>

    <table>
        <tr>
            <th>th1</th>
            <td>td1</td>
        </tr>
        <tr class="test1 is-hidden">
            <th>th-a2</th>
            <td>td-a2<br>
            <input type="radio" value="a2" name="test1a1" id="table1a1">
            <label for="table1a1">test1a1</label>
            <input type="radio" value="a2" name="test1a1" id="table1a2">
            <label for="table1a2">test1a2</label>
            <button class="js-delete">delete</button>
        </td>
        </tr>
        <tr class="test2 is-hidden">
             <th>th-b2</th>
            <td>td-b2</td>
        </tr>
    </table>


    <table class="copy_origin is-hidden">
        <tr>
            <th>th1</th>
            <td>td1</td>
        </tr>
        <tr class="test1 is-hidden">
            <th>th-a2</th>
            <td>td-a2<br>
            <input type="radio" value="a2" name="test1a2" id="table1a1">
            <label for="table1a1">test1a1</label>
            <input type="radio" value="a2" name="test1a2" id="table1a2">
            <label for="table1a2">test1a2</label>
            <button class="js-delete">delete</button>
        </td>
        </tr>
        <tr class="test2 is-hidden">
             <th>th-b2</th>
            <td>td-b2</td>
        </tr>
    </table>


    <button class="clone-btn">テーブルを追加</button>
<style>
    /* モーダルのスタイル */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}



.is-hidden {
    display: none;
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 300px;
    text-align: center;
}

button {
    margin: 5px;
    padding: 10px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const selectElement = document.getElementById('test-select');
    const modal = document.getElementById('modal');
    const modalText = document.getElementById('modal-text');
    const confirmButton = document.getElementById('confirm-btn');
    const cancelButton = document.getElementById('cancel-btn');

    let previousValue = selectElement.value;
    let newValue = null;

    // フラグで制御するためにselectの変更イベントをハンドリング
    let shouldIgnoreChange = false;

    selectElement.addEventListener('change', (event) => {
        if (shouldIgnoreChange) {
            return; // フラグが立っている場合は無視
        }
        
        // 新しい選択値を取得
        newValue = event.target.value;
        
        // モーダルを表示し、メッセージを更新
        modalText.textContent = `選択肢を"${previousValue}"から"${selectElement.options[selectElement.selectedIndex].text}"に変更しますか？`;
        modal.style.display = 'block';
        
        // フラグを立てて一旦元の値に戻す
        shouldIgnoreChange = true;
        selectElement.value = previousValue;
    });

    confirmButton.addEventListener('click', () => {
        // 確認された場合、新しい値をセットし、前の値を更新
        selectElement.value = newValue;
        previousValue = newValue;
        modal.style.display = 'none';
        shouldIgnoreChange = false;
        // 行の表示を更新
        toggleRows(newValue);
    });

    cancelButton.addEventListener('click', () => {
        // キャンセルされた場合はモーダルを閉じて元の値に戻す
        selectElement.value = previousValue;
        modal.style.display = 'none';
        shouldIgnoreChange = false;
    });

    // モーダル外をクリックした時に閉じる処理
    window.addEventListener('click', (event) => {
        if (event.target === modal) {
            selectElement.value = previousValue;
            modal.style.display = 'none';
            shouldIgnoreChange = false;
        }
    });

    // 行の表示を更新する関数
    function toggleRows(selectedValue) {
        // 最初の行を常に表示する
        const firstRow = document.querySelector('table tr:first-child');
        firstRow.classList.remove('is-hidden');

        // test1, test2 の行を一旦全て非表示にする
        document.querySelectorAll('tr.test1, tr.test2').forEach(row => {
            row.classList.add('is-hidden');
        });

        // 選択された値に対応する行の is-hidden クラスを削除して表示
        const rowsToShow = document.querySelectorAll(`tr.${selectedValue}`);
        rowsToShow.forEach(row => {
            row.classList.remove('is-hidden');
        });
    }
});

$(document).ready(function() {
    let cloneCount = 1;

    $('.clone-btn').on('click', function() {
        cloneCount++;
        const $original = $('.copy_origin');
        const $clone = $original.clone();

        // クローンからcopy_originとis-hiddenクラスを削除
        $clone.removeClass('copy_origin is-hidden');

        // ラジオボタンとラベルの同期を行う
        $clone.find('input[type="radio"]').each(function(index) {
            const newRadioId = `radio-${cloneCount}-${index + 1}`;
            $(this).attr('id', newRadioId);
            $(this).attr('name', `test1a${cloneCount}`);

            // 対応するlabelのfor属性を更新
            $clone.find('label').eq(index).attr('for', newRadioId);
        });

        // クローンを手前に配置
        $clone.insertBefore($original);
    });

    $(document).on('click', '.js-delete', function() {
        // クリックされたボタンの最も近い親の<table>を削除
        $(this).closest('table').remove();
    });
});




</script>
</body>
</html>

  </body>
</html>