Flatlist选择框二次切换时关联Select全禁用的问题修复请求

问题根源 #

你的代码只处理了不匹配Flatlist选项的Select组件（清空值+禁用），但没有处理匹配组件的启用逻辑。第一次切换后，非目标Select被禁用；第二次切换时，新的目标Select可能仍处于禁用状态，而代码没有将其重新启用，最终导致所有Select都被禁用。

修复后的JavaScript代码 #

document.getElementById('flatlist').addEventListener('change', function (event) {
    // 获取当前选中选项的data-option值
    const selectedOption = event.target.options[event.target.selectedIndex].getAttribute("data-option");

    // 遍历所有select组件，分别处理匹配与不匹配的情况
    document.querySelectorAll('.selects').forEach(sel => {
        if (sel.getAttribute('data-select') === selectedOption) {
            // 匹配的组件：启用
            sel.disabled = false;
        } else {
            // 不匹配的组件：清空值并禁用
            sel.value = "";
            sel.disabled = true;
        }
    });
});

代码改动说明 #

1. 新增启用逻辑：针对与当前Flatlist选项匹配的Select组件，明确设置disabled = false，确保切换时能重新启用目标组件。
2. 规范事件参数：将event作为函数参数传入，避免依赖全局event对象，提升代码稳定性。
3. 保留原有逻辑：不匹配的组件依然执行清空值和禁用的操作，符合需求要求。

完整可运行代码 #

<label for="flatlist">Flatlist:</label>
<select name="flatlist" id="flatlist">
    <option value="">--Please choose an option--</option>
    <option data-option="car" value="choosecars">I choose the select cars</option>
    <option data-option="pet" value="choosepets">I choose the select pets</option>
    <option data-option="language" value="chooselanguages">I choose the select languages</option>
</select>

<label for="cars">Choose a car:</label>
<select data-select="car" name="cars" id="cars" class="selects">
    <option value="">--Please choose an option--</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<label for="pet-select">Choose a pet:</label>
<select data-select="pet" name="pets" id="pet-select" class="selects">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<label for="lang">Language</label>
<select data-select="language" name="languages" id="lang" class="selects">
    <option value="">--Please choose an option--</option>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
</select>

<script>
document.getElementById('flatlist').addEventListener('change', function (event) {
    const selectedOption = event.target.options[event.target.selectedIndex].getAttribute("data-option");

    document.querySelectorAll('.selects').forEach(sel => {
        if (sel.getAttribute('data-select') === selectedOption) {
            sel.disabled = false;
        } else {
            sel.value = "";
            sel.disabled = true;
        }
    });
});
</script>

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