移动端select联动功能失效求助（PC端正常）

问题根源 #

当前代码依赖onclick事件触发联动逻辑，但移动端浏览器中，点击select元素时会先弹出系统选择器，此时onclick已触发，但用户选择选项后的value变化不会再次触发该事件，导致联动失效。此外，直接用innerHTML拼接选项在部分移动端浏览器存在渲染兼容性问题。

修改后的代码 #

HTML部分

<select class='opcoes' id="pecasDoJogo-1Auto" onchange="handleSelectChange('pecasDoJogo-1Auto','pecasDoJogo-1TeleOp')">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select> 

<select class='opcoes' id="pecasDoJogo-1TeleOp" onchange="handleSelectChange('pecasDoJogo-1TeleOp','pecasDoJogo-1Auto')">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select> 

JavaScript部分

function handleSelectChange(yourId, referenceId) {
    const yourValue = parseInt(document.getElementById(yourId).value);
    const maxQuantity = 9 - yourValue;
    const targetSelect = document.getElementById(referenceId);
    
    // 清空目标选择器
    targetSelect.innerHTML = '';
    
    // 用DOM方法创建选项，提升移动端兼容性
    for (let i = 0; i <= maxQuantity; i++) {
        const option = document.createElement('option');
        option.value = i;
        option.textContent = i;
        targetSelect.appendChild(option);
    }
}

// 页面加载时初始化联动状态
window.addEventListener('load', () => {
    handleSelectChange('pecasDoJogo-1Auto','pecasDoJogo-1TeleOp');
});

修改说明 #

1. 替换事件触发方式：将onclick改为onchange，移动端用户选择选项后会触发该事件，此时value已更新，联动逻辑能正确执行。
2. 优化选项创建方式：用document.createElement创建option元素，避免innerHTML拼接在部分移动端浏览器的渲染异常。
3. 添加初始化逻辑：页面加载时自动执行一次联动，确保初始状态符合预期。

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