Flask维修服务预约系统分步表单动态按钮渲染问题求助

我基于Flask开发维修服务预约系统，采用分步隐藏div的表单结构——点击按钮切换显示/隐藏对应步骤。目前已完成设备类型选择步骤、按钮选择激活逻辑和分步切换逻辑，但在实现设备类型→品牌→型号的动态按钮生成时遇到问题，无法达到预期的按钮格式效果。

现有代码 #

设备类型选择步骤的HTML #

<div id="step2" class="formStep">
 <h2>步骤2：选择设备品牌</h2>
 <div class="buttonGroup">
  <button class="optionButton" data-value="phone">手机</button>
  <button class="optionButton" data-value="laptop">笔记本</button>
  <button class="optionButton" data-value="tablet">平板</button>
  <button class="optionButton" data-value="desktop">台式机</button>
  <button class="optionButton" data-value="other">其他维修</button>
 </div>
 <button onclick="prevStep(1)">返回</button>
 <button id="continueButton" onclick="nextStep(3)" disabled>继续</button>
</div>

按钮选择激活逻辑 #

function selectOptionButton(button) {
    const optionButtons = document.querySelectorAll('.optionButton');
    optionButtons.forEach(btn => {
        btn.classList.remove('selected');
    });

    button.classList.add('selected');
    const continueButton = document.getElementById('continueButton');
    continueButton.removeAttribute('disabled'); // 激活继续按钮
    // 根据当前步骤判断要执行的更新函数
    if (currentStep === 2) {
        updateDeviceCompanyOptions();
    } else if (currentStep === 3) {
        updateDeviceModelOptions();
    }
}

分步切换逻辑 #

const formSteps = document.querySelectorAll('.formStep');
let currentStep = 1;

function nextStep(next) {
    formSteps[currentStep - 1].style.display = 'none';
    formSteps[next - 1].style.display = 'block';
    currentStep = next;
    updateStep(next);
}

function prevStep(prev) {
    formSteps[currentStep - 1].style.display = 'none';
    formSteps[prev - 1].style.display = 'block';
    currentStep = prev;
    updateStep(prev);
}

待修复的动态品牌按钮生成代码 #

尝试以下代码后无法实现预期格式：

function updateDeviceCompanyOptions() {
    const deviceType = document.getElementById('deviceType').value;
    const deviceCompany = document.getElementById('deviceCompany');
    deviceCompany.innerHTML = '';

    const companies = {
        phone: ['三星', '苹果', 'LG', '摩托罗拉', '其他'],
        laptop: ['苹果', '三星', '宏碁', '华硕', '戴尔', '惠普', '联想', '其他'],
        tablet: ['苹果', '三星'],
        desktop: ['苹果', '三星', '宏碁', '华硕', '戴尔', '惠普', '其他'],
        other: []
    };

    companies[deviceType].forEach(company => {
        const option = document.createElement('button');
        option.classList.add('optionButton');
        option.textContent = company;
        option.dataset.value = company;
        option.addEventListener('click', function() {
            selectOptionButton(option);
        });
        deviceCompany.appendChild(option);
    });
}

需求目标 #

1. 选择设备类型后，第二步显示对应品牌按钮
2. 选择品牌后，第三步显示对应型号按钮（如选苹果手机则显示iPhone 11、iPhone 12等）

修复方案 #

1. 修正DOM元素获取逻辑 #

原代码中document.getElementById('deviceType')不存在，设备类型需从选中按钮的data-value获取，同时确保目标容器选择正确：

function updateDeviceCompanyOptions() {
    // 获取当前选中的设备类型按钮
    const selectedDeviceBtn = document.querySelector('#step2 .optionButton.selected');
    if (!selectedDeviceBtn) return;
    const deviceType = selectedDeviceBtn.dataset.value;
    
    // 定位到第三步的按钮容器
    const deviceCompanyContainer = document.querySelector('#step3 .buttonGroup');
    deviceCompanyContainer.innerHTML = '';

    const companies = {
        phone: ['三星', '苹果', 'LG', '摩托罗拉', '其他'],
        laptop: ['苹果', '三星', '宏碁', '华硕', '戴尔', '惠普', '联想', '其他'],
        tablet: ['苹果', '三星'],
        desktop: ['苹果', '三星', '宏碁', '华硕', '戴尔', '惠普', '其他'],
        other: []
    };

    companies[deviceType].forEach(company => {
        const option = document.createElement('button');
        option.classList.add('optionButton');
        option.textContent = company;
        option.dataset.value = company;
        option.addEventListener('click', function() {
            selectOptionButton(this);
        });
        deviceCompanyContainer.appendChild(option);
    });
}

2. 补充型号生成逻辑 #

参考品牌生成逻辑，添加型号动态生成函数：

function updateDeviceModelOptions() {
    const selectedCompanyBtn = document.querySelector('#step3 .optionButton.selected');
    if (!selectedCompanyBtn) return;
    const company = selectedCompanyBtn.dataset.value;
    // 获取之前选中的设备类型
    const deviceType = document.querySelector('#step2 .optionButton.selected').dataset.value;

    const deviceModelContainer = document.querySelector('#step4 .buttonGroup');
    deviceModelContainer.innerHTML = '';

    const models = {
        phone: {
            '三星': ['Galaxy S23', 'Galaxy S22', 'Galaxy A54', '其他'],
            '苹果': ['iPhone 15', 'iPhone 14', 'iPhone 13', '其他'],
            'LG': ['G8', 'V60', '其他'],
            '摩托罗拉': ['Edge 40', 'G Power', '其他'],
            '其他': []
        },
        laptop: {
            '苹果': ['MacBook Pro 16', 'MacBook Air M2', '其他'],
            '三星': ['Galaxy Book 3', 'Galaxy Book 2', '其他'],
            '戴尔': ['XPS 15', 'Inspiron 14', '其他']
        }
        // 补充其他设备类型的型号数据
    };

    if (models[deviceType] && models[deviceType][company]) {
        models[deviceType][company].forEach(model => {
            const option = document.createElement('button');
            option.classList.add('optionButton');
            option.textContent = model;
            option.dataset.value = model;
            option.addEventListener('click', function() {
                selectOptionButton(this);
            });
            deviceModelContainer.appendChild(option);
        });
    }
}

3. 确保样式统一 #

为动态生成的按钮添加与原有按钮一致的CSS类，并定义选中状态样式：

.optionButton {
    padding: 10px 20px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.optionButton.selected {
    background: #007bff;
    color: white;
    border-color: #0056b3;
}

.buttonGroup {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

内容的提问来源于stack exchange，提问作者Ishan Popatia