<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>シンプルなプルダウンリスト</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        form {
            max-width: 300px;
            margin: auto;
            padding: 1em;
            border: 1px solid #ccc;
            border-radius: 1em;
        }
        div + div {
            margin-top: 1em;
        }
        label {
            display: block;
            margin-bottom: 0.5em;
        }
        select, input[type="submit"], input[type="date"], input[type="text"], button {
            width: calc(100% - 1em);
            padding: 0.5em;
            margin-top: 0.5em;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<form id="simpleDropdownForm">
    <div>
        <label for="date">日付を選択:</label>
        <input type="date" id="date" name="date">
    </div>
    <div>
        <label for="vehicle">車両を選択:</label>
        <select id="vehicle" name="vehicle">
            <option value="">-- 選択してください --</option>
            <option value="car1">車両 1</option>
            <option value="car2">車両 2</option>
            <option value="car3">車両 3</option>
        </select>
    </div>
    <div>
        <label for="category">メンバーを選択:</label>
        <select id="category" name="category">
            <option value="">-- 選択してください --</option>
            <option value="浅見、小林、中馬、夏目">浅見、小林、中馬、夏目</option>
            <option value="浅見、小林、中馬">浅見、小林、中馬</option>
        </select>
    </div>

    <div>
        <label for="otherCategory">その他メンバー:</label>
        <input type="text" id="otherCategory" name="otherCategory" list="otherOptions">
        <datalist id="otherOptions">
            <option value="シイタケ">
            <option value="シメジ">
        </datalist>
        <button type="button" onclick="clearOtherCategory()">クリア</button>
    </div>
    <div>
        <label for="item">ドライバーを選択:</label>
        <select id="item" name="item">
            <option value="">-- 選択してください --</option>
        </select>
    </div>
    <div>
        <input type="submit" value="送信">
    </div>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('date').value = today;
    });

    document.getElementById('category').addEventListener('change', updateDriverOptions);
    document.getElementById('otherCategory').addEventListener('input', updateDriverOptions);

    function updateDriverOptions() {
        const selectedCategory = document.getElementById('category').value;
        const otherCategory = document.getElementById('otherCategory').value;
        const itemSelect = document.getElementById('item');

        // ドライバーのオプションをクリア
        itemSelect.innerHTML = '<option value="">-- 選択してください --</option>';

        // メンバーに基づくオプションを追加
        if (selectedCategory) {
            const members = selectedCategory.split('、');
            members.forEach(member => {
                itemSelect.innerHTML += `<option value="${member.trim()}">${member.trim()}</option>`;
            });
        }

        // その他メンバーをオプションに追加
        if (otherCategory) {
            itemSelect.innerHTML += `<option value="${otherCategory.trim()}">${otherCategory.trim()}</option>`;
        }
    }

    function clearOtherCategory() {
        const otherCategoryInput = document.getElementById('otherCategory');
        otherCategoryInput.value = '';
        updateDriverOptions();
    }

    document.getElementById('simpleDropdownForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const selectedDate = document.getElementById('date').value;
        const selectedVehicle = document.getElementById('vehicle').value;
        const selectedCategory = document.getElementById('category').value;
        const selectedOtherCategory = document.getElementById('otherCategory').value;
        const selectedItem = document.getElementById('item').value;
        alert('日付: ' + selectedDate + '\n車両: ' + selectedVehicle + '\nメンバー: ' + selectedCategory + '\nその他メンバー: ' + selectedOtherCategory + '\nドライバー: ' + selectedItem);
    });
</script>

</body>
</html>
