В раскрывающемся списке установка имени группы opt в качестве текста выбранного параметра с JS, не работающим в Firefox - PullRequest
Новая
       15

В раскрывающемся списке установка имени группы opt в качестве текста выбранного параметра с JS, не работающим в Firefox

0 голосов
/ 24 марта 2020

У меня есть javascript, что заставляет select установить отображаемый выбранный текст в раскрывающемся списке в качестве метки <optgroup> выбранного параметра, но когда раскрывающийся список открыт, он отображает текст, сохраненный в data-content, в качестве текста параметра под знаком <optgroup>. Он прекрасно работает в Chrome, но ломается в Firefox. При нажатии кнопки выбора в Firefox он начинает открываться и закрываться так быстро, что выбор сделать невозможно. Я замечаю, что когда я комментирую секцию $(this).blur, мерцание прекращается, но затем js явно прерывается. Спасибо за любую помощь, которую вы можете предложить!

Вы можете просмотреть jsfiddle здесь

Здесь HTML: 

<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>

Здесь JS: 

$('#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'));
  });
});

1 Ответ

0 голосов
/ 24 марта 2020

Вид грубого решения, но я решил его здесь 

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

var browser;
if (navigator.userAgent.match(/Chrome/i)) {
    browser = "chrome";
}
else {
    browser = "other";
}

$("#assignment_type_choice").on('click mouseup', function(){
    if(browser === "other"){
    $('#assignment_type_choice').each(function(){
      $(this).text($(this).attr('data-title'));
    });
    $('#assignment_type_choice option:selected').html($('#assignment_type_choice option:selected').attr('data-title'))
   };
 });


$("#assignment_type_choice").on('change mouseleave', function(){
    console.log("browser is " + browser)
    if(browser === "chrome"){
    $('#car_choice option').each(function(){
      $(this).text($(this).attr('data-title'));
    });
    $('#assignment_type_choice option:selected').html($('#assignment_type_choice option:selected').attr('data-title'))
 };
});

$('#assignment_type_choice').on('mousedown', function(){
  $('#assignment_type_choice option').each(function(){
    $(this).text( $(this).attr('data-content'));
  });
});
...