<select name="gender" id="genderSelect" style="display:none;">
    <option value="男生">男生</option>
    <option value="女生">女生</option>
</select>

<div>
    <img id="genderImage" src="" alt="性别图片" style="width: 100px; height: auto;">
</div>

<script>
    // 定义性别与图片的映射关系
    const genderImages = {
        '男生': 'nan.jpg',
        '女生': 'nv.jpg'
    };

    // 获取下拉框和图片元素
    const genderSelect = document.getElementById('genderSelect');
    const genderImage = document.getElementById('genderImage');

    // 初始化默认图片
    genderImage.src = genderImages[genderSelect.value];

    // 添加事件监听器，当用户选择性别时更新图片
    genderSelect.addEventListener('change', function () {
        const selectedGender = this.value;
        if (genderImages[selectedGender]) {
            genderImage.src = genderImages[selectedGender];
        }
    });

    // 提供可视化的性别选择按钮
    document.addEventListener('DOMContentLoaded', function () {
        const buttonContainer = document.createElement('div');
        buttonContainer.style.display = 'flex';
        buttonContainer.style.gap = '10px';

        for (const [gender, image] of Object.entries(genderImages)) {
            const button = document.createElement('button');
            button.textContent = gender;
            button.style.padding = '5px 10px';
            button.style.border = '1px solid #ccc';
            button.style.cursor = 'pointer';

            button.onclick = function () {
                genderSelect.value = gender;
                genderImage.src = image;
            };

            buttonContainer.appendChild(button);
        }

        document.body.insertBefore(buttonContainer, genderImage);
    });
</script>