如何基于隐藏域语言值用jQuery实现表单多语言文本适配

你的基于预定义语言映射表的实现思路完全可行，逻辑轻量、维护成本低，完全适配当前页面结构的需求。

完整可落地实现代码 #

// 预定义全语种文案映射表
const languageArray = [
  {
    code: 'en',
    campus: 'Select Campus',
    bootcamp: 'Select Bootcamp'
  },
  {
    code: 'es',
    campus: 'Quiero asistir a este campus',
    bootcamp: 'Estoy interesado en este bootcamp'
  },
  {
    code: 'fr',
    campus: 'Je veux rejoindre ce campus',
    bootcamp: 'Je suis intéressé.e par ce cours'
  },
  {
    code: 'pt',
    campus: 'Quero frequentar este campus',
    bootcamp: 'Tenho interesse neste bootcamp'
  },
  {
    code: 'de',
    campus: 'Ich möchte an diesem Campus teilnehmen',
    bootcamp: 'Ich interessiere mich für dieses Bootcamp'
  },
  {
    code: 'nl',
    campus: 'Ik wil deze campus bezoeken',
    bootcamp: 'Ik ben geïnteresseerd in deze bootcamp'
  }
];

// DOM加载完成后执行替换逻辑
$(function() {
  // 读取隐藏域存储的语言标识，做格式兼容处理
  const currentLang = $('#language').val().trim().toLowerCase();
  // 匹配对应语言配置，未匹配到时默认使用英语文案兜底
  const matchedConfig = languageArray.find(item => item.code === currentLang) || languageArray[0];

  // 仅替换两个下拉框的空值提示项，不影响其他实际选项
  $('#Campus').find('option[value=""]').text(matchedConfig.campus);
  $('#Bootcamp').find('option[value=""]').text(matchedConfig.bootcamp);
});

关键适配逻辑说明 #

• 格式兼容处理：对读取到的语言标识做去空白、统一转小写操作，避免因为隐藏域值存在空格、大小写不统一导致的匹配失败
• 异常兜底：当隐藏域存储的语言标识不在映射表范围内时，自动使用默认英语文案作为展示内容，不会出现占位文本为空的问题
• 选择器精准度：通过option[value=""]定位两个下拉框初始的提示项，后续动态加载的实际选项不会被误修改
• 技术栈适配：完全基于当前使用的jQuery实现，不需要引入额外的国际化插件，无额外性能损耗

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