如何用jQuery根据浏览器语言自动选中自定义下拉菜单选项？

看起来你已经搭建好了带国旗的语言选择菜单，不过自动匹配浏览器语言的功能没生效，主要是几个小细节问题导致的，我来帮你一步步修复：

先梳理现有代码的核心问题 #

1. 脚本执行时机不对：你的自动匹配代码直接放在<script>标签里，可能DOM还没完全加载完成就运行了，导致找不到#select、#ger这些元素
2. 没有动态匹配浏览器语言：你直接硬编码把德语选项的文本赋值给#select，不管浏览器实际是什么语言都固定显示德语
3. 语言代码格式不兼容：navigator.language返回的是类似de-DE、es-ES的标准格式，和你选项的id（ger、sp）对应不上，需要做映射转换

完整解决方案 #

第一步：优化HTML结构（增加可靠的匹配标识）

给每个语言选项的<a>标签加上data-lang属性，存储标准语言代码，避免依赖文本内容（以后修改选项文本也不会影响匹配逻辑）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- language picker with flags -->
<div class="row">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu1" style="width: 200px; position: relative; left: 19px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span id="select">Select source language </span><span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="width: 200px; position: absolute; left: 19px">
      <li class="dropdown-header">Languages</li>
      <li><a role="menuitem" id="ger" href="#" data-lang="de">German <img src="flags/Germany.png"/></a></li>
      <li role="separator" class="divider"></li>
      <li><a role="menuitem" id="sp" href="#" data-lang="es">Spanish <img src="flags/Spain.png"/></a></li>
      <li role="separator" class="divider"></li>
      <li><a role="menuitem" id="fr" href="#" data-lang="fr">French <img src="flags/France.png"/></a></li>
    </ul>
  </div>
</div>

第二步：修改JS逻辑（解决时机、匹配、用户偏好问题）

把所有JS代码放在$(document).ready()中确保DOM加载完成后执行，同时加入语言映射、浏览器语言解析，还能保存用户的手动选择偏好：

$(document).ready(function() {
  // 下拉菜单点击事件处理
  $('.dropdown-menu a').click(function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    // 提取纯文本内容（排除img元素）
    const selectedText = $(this).contents().filter(function() {
      return this.nodeType === 3; // 只筛选文本节点
    }).text().trim();
    $('#select').text(selectedText);
    // 保存用户选择的语言到本地存储，下次打开优先使用
    const selectedLang = $(this).data('lang');
    localStorage.setItem('preferredLang', selectedLang);
  });

  // 自动设置默认语言的函数
  function setDefaultLanguage() {
    // 优先使用用户之前手动保存的语言偏好
    const savedLang = localStorage.getItem('preferredLang');
    // 获取浏览器语言，兼容旧版浏览器
    let browserLang = navigator.language || navigator.userLanguage;
    // 提取主语言代码（比如从de-DE中得到de）
    let targetLangCode = savedLang || browserLang.split('-')[0];

    // 语言映射表：把浏览器语言代码对应到选项的id
    const langMap = {
      'de': 'ger',
      'es': 'sp',
      'fr': 'fr'
    };

    // 找到对应的选项id
    const targetOptionId = langMap[targetLangCode];
    if (targetOptionId) {
      const $targetOption = $('#' + targetOptionId);
      if ($targetOption.length) {
        // 模拟点击选项，复用点击事件的逻辑
        $targetOption.click();
      }
    } else {
      // 如果没有匹配的语言，保持默认提示文本
      $('#select').text('Select source language');
    }
  }

  // 页面加载时执行自动设置逻辑
  setDefaultLanguage();
});

关键改进点说明 #

• DOM加载时机保障：$(document).ready()确保所有页面元素渲染完成后再执行JS，彻底解决找不到元素的问题
• 灵活的语言匹配：通过langMap把浏览器返回的各种格式语言代码（比如de和de-DE）都能对应到你的选项
• 用户偏好记忆：用localStorage记录用户手动选择的语言，下次打开页面会优先使用这个选择，提升用户体验
• 纯文本提取：用contents().filter()精准获取选项的文本内容，避免把图片元素的内容混入显示文本

这样修改后，你的下拉菜单就能自动根据浏览器语言选中对应选项，同时支持用户手动切换并记住选择啦～

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