如何重置联动select下拉框？选“请选择国家”时未重置后续选项

你的问题根源在于第一个下拉框切换回默认选项时，未处理后续下拉框的状态重置与隐藏。以下是修改后的完整代码，已添加所需的重置逻辑：

$(function() {
    $("#select1").change(function() {
        if ($(this).data('options') == undefined) {
            $(this).data('options', $('#select2 option').clone());
        }
        var id = $(this).val();
        
        // 当选择"Select Country"时，重置并隐藏后续下拉框
        if (id === "") {
            $('#select2').hide().html('<option value="">Select State</option>');
            $('#select3').hide().html('<option value="">Select city</option>');
            return;
        }
        
        var options = $(this).data('options').filter('[data-value=' + id + ']');
        // 先添加默认提示选项，再追加筛选后的州选项
        $('#select2').html('<option value="">Select State</option>').append(options).show();
        // 同时重置并隐藏城市下拉框，避免残留旧选项
        $('#select3').hide().html('<option value="">Select city</option>');
    });

    $("#select2").change(function() {
        if ($(this).data('options') == undefined) {
            $(this).data('options', $('#select3 option').clone());
        }
        var id = $(this).val();
        
        // 当选择"Select State"时，重置并隐藏城市下拉框
        if (id === "") {
            $('#select3').hide().html('<option value="">Select city</option>');
            return;
        }
        
        var options = $(this).data('options').filter('[data-value=' + id + ']');
        // 先添加默认提示选项，再追加筛选后的城市选项
        $('#select3').html('<option value="">Select city</option>').append(options).show();
    });
});

关键改动说明 #

• 一级下拉框空值处理：检测到选择"Select Country"时，直接重置#select2和#select3为初始默认选项，并隐藏它们，恢复页面初始状态
• 联动时的次级重置：当选择有效国家后，自动重置并隐藏#select3，避免之前选择的城市选项残留
• 二级下拉框空值处理：选择"Select State"时，同样重置并隐藏#select3
• 默认选项保留：渲染筛选后的选项前，先插入默认提示选项（如"Select State"），保持交互逻辑的一致性

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