jQuery change()事件异常：联动下拉框切换后内容空白问题排查

DevOps 小满

2026-5-27

联动下拉框切换后空白的问题排查与解决方案

问题原因分析

我帮你排查了下这个bug的核心原因：你的代码在从克隆的lgaSelectSeed中提取对应州的LGA选项时，执行的是元素移动操作，而不是复制操作。

举个实际场景的例子：

第一次选择Lagos时，你把lgaSelectSeed里optgroup[label="Lagos"]的子选项直接移到了lgaSelect里，这时候lgaSelectSeed中的Lagos分组已经没有任何选项了；
当你切换到Anambra时，同样把Anambra分组的选项移走，lgaSelectSeed里的Anambra分组也空了；
等你再次切回Lagos时，lgaSelectSeed里的Lagos分组已经没有选项可以提取，自然就显示空白了。

另外你的代码还有两个小细节问题：

引用克隆的下拉框时，应该用$('#lgaSelectSeed')而不是$(lgaSelectSeed)（因为它是ID选择器，需要加#）；
代码末尾缺少闭合的});，会导致JS执行报错。

修复后的代码

只需要把提取选项的逻辑改成复制元素而不是移动，就能彻底解决问题：

$(function () { 
    var stateSelect = $("#stateSelect"); 
    var lgaSelect = $("#lgaSelect"); 
    var hiddenLga = $("#hiddenLgas"); 
    // 克隆原始LGA下拉框并保存为种子数据
    hiddenLga.html(lgaSelect.clone().prop('id', 'lgaSelectSeed')); 

    stateSelect.change(function () { 
        var selectedStateText = $(this).find('option:selected').text(); 
        // 从种子数据中找到对应州的分组
        var targetOptgroup = $('#lgaSelectSeed').find('optgroup[label="' + selectedStateText + '"]'); 
        // 复制分组内的选项，而不是移动
        lgaSelect.html(targetOptgroup.children().clone()); 
    }); 
});