级联下拉选择框：如何实现表单提交传地区名称而非编码且不破坏联动？

核心原理 #

保持原有联动逻辑不变：各级下拉的option.value继续赋值为对应条目的编码值，专门用于匹配下一级JSON的关联字段做联动过滤。仅在表单提交环节做参数替换，全程不改动select的内部取值和联动逻辑，既避免匹配失效，又能让表单提交时传递地区名称而非编码。

调整后完整实现代码 #

$(function(){
    // 预加载全量JSON数据到内存，减少重复请求
    let regionList = [], provinceList = [], cityList = [];

    $.getJSON('regions.json', function(res){         
        regionList = res.sort();
        // 生成地区下拉选项
        let regOpt = `<option value="" disabled selected hidden>Region</option>`;
        $.each(regionList, function(i, region){
            regOpt += `<option value='${region.code}'>${region.altName}</option>`;
        }); 
        $('#region').html(regOpt);    
    });

    $.getJSON('provinces.json', function(res){
        provinceList = res;
    });

    $.getJSON('citiesMunicipalities.json', function(res){
        cityList = res;
    });

    // 地区选择联动省份
    $('#region').change(function(){
        const selectedRegionCode = $(this).val();
        // 重置下级下拉状态
        $('#province').html(`<option value="" disabled selected hidden>Province</option>`).prop('disabled', true);
        $('#city').html(`<option value="" disabled selected hidden>City</option>`).prop('disabled', true);

        // 按code匹配对应省份
        const matchedProvinces = provinceList.filter(item => item.region === selectedRegionCode);
        let provOption = `<option value="" disabled selected hidden>Province</option>`;
        $.each(matchedProvinces, function(i, province){
            provOption += `<option value='${province.code}'>${province.name}</option>`;
        });
        $('#province').html(provOption).prop('disabled', false);
    });

    // 省份选择联动城市
    $('#province').change(function(){
        const selectedProvinceCode = $(this).val();
        // 重置城市下拉状态
        $('#city').html(`<option value="" disabled selected hidden>City</option>`).prop('disabled', true);

        // 按code匹配对应城市
        const matchedCities = cityList.filter(item => item.province === selectedProvinceCode);
        let cityOption = `<option value="" disabled selected hidden>City</option>`;
        $.each(matchedCities, function(i, city){
            cityOption += `<option value='${city.code}'>${city.name}</option>`;
        });
        $('#city').html(cityOption).prop('disabled', false);       
    });

    // 拦截表单提交，替换为名称参数
    $('#addform').on('submit', function(e){
        e.preventDefault();
        const form = $(this);

        // 获取每个下拉选中的名称文本
        const regionText = $('#region option:selected').text().trim();
        const provinceText = $('#province option:selected').text().trim();
        const cityText = $('#city option:selected').text().trim();

        // 临时移除原下拉的name属性，避免编码值被提交
        $('#region').removeAttr('name');
        $('#province').removeAttr('name');
        $('#city').removeAttr('name');

        // 动态添加隐藏字段，以原字段名提交名称值
        const tempInputs = [
            $('<input>').attr({type: 'hidden', name: 'region', value: regionText}),
            $('<input>').attr({type: 'hidden', name: 'province', value: provinceText}),
            $('<input>').attr({type: 'hidden', name: 'city', value: cityText})
        ];
        form.append(tempInputs);

        // 触发原生表单提交
        this.submit();

        // 提交触发后清理临时内容，恢复表单结构
        setTimeout(() => {
            tempInputs.forEach(input => input.remove());
            $('#region').attr('name', 'region');
            $('#province').attr('name', 'province');
            $('#city').attr('name', 'city');
        }, 0);
    });
});

同步优化的原有问题 #

• 全量JSON数据预加载缓存，避免每次切换下拉都重复发起网络请求
• 每次上级下拉变更时，自动重置下级下拉的内容和可用状态，避免旧选项、旧选中值残留
• 修复原代码中全局option变量累积导致的下拉选项重复问题
• 提交环节不修改select的选中状态和取值逻辑，完全不影响原有联动流程

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