我来帮你搞定这个Chrome和Safari上的兼容问题！这种情况大概率是事件绑定的方式不对导致的——Firefox对下拉选项的click事件处理比较宽松，但Chrome和Safari更遵循标准，不会触发<option>的click事件。

先看一下你的原始代码，我先帮你补全并修正：

你的HTML（假设目标div是#target-div） #

<label for="priv-firma-select">Bestellen als</label><br />
<select id="priv-firma-select" name="firma-privat">
  <option id="privat" value="privat">Privatperson</option>
  <option id="firma" value="firma">Firma</option>
</select>

<!-- 假设这是你要切换类的目标div -->
<div id="target-div">目标内容</div>

修复后的jQuery代码 #

$j(document).ready(function() {
  // 给select绑定change事件（这是所有浏览器都支持的标准事件）
  $j('#priv-firma-select').on('change', function() {
    // 获取当前选中的选项值
    var selectedValue = $j(this).val();
    var targetDiv = $j('#target-div'); // 替换成你实际的目标div选择器

    // 根据选中值切换类
    if (selectedValue === 'firma') {
      targetDiv.addClass('firma-active'); // 添加你需要的类
      targetDiv.removeClass('privat-active'); // 移除另一个类（如果需要）
    } else {
      targetDiv.removeClass('firma-active');
      targetDiv.addClass('privat-active');
    }
  });

  // 页面加载完成后手动触发一次change事件，确保初始状态正确
  $j('#priv-firma-select').trigger('change');
});

关键修复点说明 #

1. 事件绑定到select而非option：
   之前你可能是把click事件绑定到了<option>标签上，这在Firefox能生效，但Chrome/Safari不会响应option的click事件。正确的做法是给<select>绑定change事件，这是跨浏览器兼容的标准做法。

2. 确保jQuery别名正确：
   确认$j确实是jQuery的别名（比如你用了jQuery.noConflict()来避免冲突），如果别名不对，代码会直接失效。如果不确定，可以换成jQuery或者$试试。

3. 初始化触发change事件：
   页面加载时默认选中的选项不会自动触发change事件，手动调用trigger('change')能保证初始状态下目标div的类也是正确的，避免出现初始显示异常。

如果你的逻辑是通过option的id来判断，也可以改成这样：

$j('#priv-firma-select').on('change', function() {
  var selectedOptionId = $j(this).find('option:selected').attr('id');
  var targetDiv = $j('#target-div');

  if (selectedOptionId === 'firma') {
    targetDiv.addClass('your-class');
  } else {
    targetDiv.removeClass('your-class');
  }
});

这样修改后，Chrome、Safari和Firefox应该都能正常工作啦！

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