如何使用jQuery实现可靠的多级联动下拉选择框

核心实现代码 #

$(function() {
    // 缓存DOM对象避免重复查询，提升性能
    const $d1 = $('#d1');
    const $d2 = $('#d2');
    const $d3 = $('#d3');
    const $d2AllOptions = $d2.find('option');
    const $d3AllOptions = $d3.find('option');

    // 第一级下拉框联动第二级逻辑
    $d1.on('change', function() {
        // 获取第一级选中项的type属性值，用于匹配第二级选项前缀
        const selectedType = $(this).find('option:selected').attr('type');
        // 重置第二级选中状态
        $d2.val('');
        // 匹配前缀的选项显示，其余隐藏
        $d2AllOptions.each(function() {
            const currentOptType = $(this).attr('type');
            // 低版本兼容可替换为：currentOptType.indexOf(selectedType + '_') === 0
            $(this).toggle(currentOptType.startsWith(selectedType + '_'));
        });
        // 触发第二级change事件，自动更新第三级状态
        $d2.trigger('change');
    });

    // 第二级下拉框联动第三级逻辑
    $d2.on('change', function() {
        const selectedSubType = $(this).find('option:selected').attr('type');
        // 重置第三级选中状态并隐藏
        $d3.val('').hide();
        // 第二级未选中有效值直接返回
        if (!selectedSubType) return;
        // 匹配type属性的选项+默认提示项显示，其余隐藏
        $d3AllOptions.each(function() {
            $(this).toggle($(this).val() === '' || $(this).attr('type') === selectedSubType);
        });
        // 显示第三级下拉框
        $d3.show();
    });

    // 页面加载完成后初始化状态，适配PHP预填充的选中值
    $d1.trigger('change');
});

可选优化 #

如果需要根据第一级的选择动态修改第三级的提示文案，可在第二级联动逻辑中添加以下代码：

// 动态修改第三级默认提示
const d1SelectedVal = $d1.val();
$d3AllOptions.first().text(d1SelectedVal === 'Colours' ? 'Choose a color' : 'Choose a fruit');

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