在一个下拉菜单中，将optgroup名称设置为选定的选项文本，而JS在Firefox中不起作用

Question

[我有Javascript使select将下拉菜单中显示的所选文本设置为所选选项的<optgroup>标签，但是当下拉列表打开时，它将在[data-content]中存储的文本作为选项文本显示在[ C0]标签。它在Chrome浏览器中运行良好，但在Firefox中无法正常运行。在Firefox中单击选择后，它将开始打开和关闭，因此无法快速进行选择。我注意到当我注释掉<optgroup>部分时，闪烁停止了，但随后js显然中断了。感谢您提供的任何帮助！

您可以查看jsfiddle $(this).blur

这里是HTML：

here

这里是JS：

<select id="car_choice">
  <optgroup label="Truck">
    <option data-value="truck" data-title="Truck" data-content="A description of a truck">
      Truck
    </option>
  </optgroup>
  <optgroup label="Car">
    <option data-value="car" data-title="Car" data-content="A description of a car">
      Car
    </option>
  </optgroup>
</select>

Answer 1

总的解决方案，但我解决了

$('#car_choice option:selected').html($('#car_choice option:selected').attr('value'));

$("#car_choice").on('change mouseleave', function(){
  $('#car_choice option').each(function(){
    $(this).html($(this).attr('data-title'));
  });
  $('#car_choice option:selected').html($('#car_type_choice option:selected').attr('data-title'))
  $(this).blur();
});

$('#car_choice').on('focus', function(){
  $('#car_choice option').each(function(){
    $(this).html( $(this).attr('data-content'));
  });
});

here