我的JavaScript代码仅在Firefox浏览器生效，Chrome与Safari无法运行如何解决？

嘿，我来帮你搞定这个跨浏览器兼容的问题！你的代码在Firefox能正常跑，但Chrome和Safari不行，主要是两个地方踩坑了：

问题根源 #

• option标签的onclick事件兼容性极差：Chrome和Safari从根本上就不支持<option>元素绑定onclick事件，Firefox是少数特例支持的，这就是跨浏览器失效的核心原因。
• 选中值的取值时机错误：你在页面加载时就获取了value变量，但这个值只会在初始化时取一次，用户切换选项后，这个变量不会自动更新，后续的判断逻辑自然拿不到最新选中的值。

修复方案（兼容所有主流浏览器） #

我们改用select的onchange事件来实现逻辑，这是所有浏览器都支持的标准做法，同时实时获取选中值，确保逻辑准确。

第一步：修改JavaScript代码 #

把原来的script替换成下面的代码（放在</body>标签前即可）：

// 确保DOM元素加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取select元素
  const empresaSelect = document.getElementById('empresa');

  // 定义选项切换后的处理逻辑
  function handleEmpresaChange() {
    const selectedValue = empresaSelect.value; // 实时获取当前选中值

    // 先统一隐藏所有相关元素，避免重复写隐藏代码
    const convites = ['umConvite', 'doisConvite', 'tresConvite', 'quatroConvite'];
    convites.forEach(id => {
      document.getElementById(id).style.display = 'none';
    });
    document.getElementById('btn-confirmar').style.display = 'none';

    // 根据选中值显示对应元素
    switch(selectedValue) {
      case 'Empresa 1':
        const umConvite = document.getElementById('umConvite');
        umConvite.style.display = 'flex';
        umConvite.style.flexDirection = 'column';
        document.getElementById('btn-confirmar').style.display = 'flex';
        break;
      case 'Empresa 2':
        const doisConvite = document.getElementById('doisConvite');
        doisConvite.style.display = 'flex';
        doisConvite.style.flexDirection = 'column';
        document.getElementById('btn-confirmar').style.display = 'flex';
        break;
      // 如果后续有更多企业选项，直接在这里加case即可
    }
  }

  // 绑定change事件
  empresaSelect.addEventListener('change', handleEmpresaChange);

  // 页面初始化时触发一次，确保默认状态正确
  handleEmpresaChange();
});

第二步：简化HTML的select代码 #

去掉所有option上的onclick事件，代码会更简洁：

<select name="empresa" id="empresa">
  <option value="none">-----</option>
  <option value="Empresa 1">Empresa 1</option>
  <option value="Empresa 2">Empresa 2</option>
</select>

为什么这样改？ #

• 用select的onchange事件是跨浏览器兼容的标准方案，Chrome、Safari、Firefox、Edge都能完美支持；
• 每次切换选项都实时获取最新选中值，逻辑不会因为变量未更新而出错；
• 把重复的隐藏逻辑抽出来，代码更易维护，后续加新选项也更方便。

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