Как добавить и удалить <option>с <optgroup>из поля A в поле B в Safari?

Question

Этот вопрос уже задан здесь , и на него прекрасно ответили, но проблема в том, что он не работает должным образом в Safari, как в Chrome. В Safari ни optgroup, ни option не поддерживают display: none.

Есть ли способ заставить его работать так же, как в Chrome?

Вот фрагмент кода

$.each($('#u-address > optgroup'), function() {
  $(this).clone().empty().appendTo('#m-address');
});
myOgVisibility();
//for dblclick
$('#u-address').dblclick(function() {
  $.each($('#u-address option:selected'), function() {
    var og = $(this).parent().attr('class');
    $(this).remove().appendTo('#m-address .' + og);
    $(this).removeAttr('selected');
  });
  myOgVisibility();
});
$('#m-address').dblclick(function() {
  $.each($('#m-address option:selected'), function() {
    var og = $(this).parent().attr('class');
    $(this).remove().appendTo('#u-address .' + og);
    $(this).removeAttr('selected');
  });
  myOgVisibility();
});

function myOgVisibility() {
  $.each($('.showUniOgrp > optgroup'), function() {
    if ($(this).html().trim() === "") {
      //$(this).detach();
      //$(this).css({'display': 'none'});                
      //$(this).attr('disabled', 'disabled').hide();
      $(this).css({
        'height': '0px !important',
        'display': 'none'
      });
    } else {
      //$(this).appendTo('#m-address');
      //$(this).css({'display': 'block'});
      //$(this).removeAttr('disabled').show();
      $(this).css({
        'height': 'auto',
        'display': 'block'
      });
    }
  });
}

select {
  display: inline-block;
  width: 30%;
  height: 200px;
  border-radius: 5px;
  overflow: hidden;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="u-address-fields">
  <select size="15" multiple="multiple" class="showUniOgrp" id="u-address">
    <optgroup class="og-swe" data-opt="qq" label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup class="og-ger" data-opt="qq" label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
      <option value="bmw">BMW</option>
    </optgroup>
    <optgroup class="og-ita" data-opt="qq" label="Italian Cars">
      <option value="ferrari">Ferrari</option>
      <option value="lamborghini">Lamborghini</option>
    </optgroup>
  </select>
</div>

<div class="my-address-fields">
  <select size="15" multiple="multiple" class="showUniOgrp" id="m-address">

  </select>
</div>

Answer 1

Вам понадобится третий выбор со всеми оптгруппами и опциями, который скрыт. Вы можете использовать его по-разному, чтобы достичь того, что вы хотите, но вот один из способов:

У вас есть вся информация в скрытом выделении (#h-address), и как только опция выбрана, вы добавляете в нее класс (.slctd), а если она не выбрана, вы удаляете класс. Затем заполните два видимых выбора и удалите ненужные части из каждого.

$.each($('#h-address > optgroup'), function() {
  $(this).clone().appendTo('#u-address');
});

$('#u-address').dblclick(function() {
  $.each($('#u-address option:selected'), function() {
    $('#hidden-fields option[value=' + $(this).val() + ']').addClass('slctd');
    showFields();
  });
});

$('#m-address').dblclick(function() {
  $.each($('#m-address option:selected'), function() {
    $('#hidden-fields option[value=' + $(this).val() + ']').removeClass('slctd');
    showFields();
  });
});

function showFields() {
  $('#u-address').empty();
  $('#m-address').empty();
  $.each($('#h-address > optgroup'), function() {
    $(this).clone().appendTo('#u-address');
    $(this).clone().appendTo('#m-address');
  });
  $('#u-address option.slctd').remove();
  $('#m-address option:not(.slctd)').remove();

  $.each($('.showUniOgrp > optgroup'), function() {
    if ($(this).html().trim() === "") {
      $(this).remove(); //or detach()
    }
  });
}

select {
  display: inline-block;
  width: 30%;
  height: 200px;
  border-radius: 5px;
  overflow: hidden;
  float: left;
}

#hidden-fields {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="u-address-fields">
  <select size="15" multiple="multiple" class="showUniOgrp" id="u-address"></select>
</div>

<div class="my-address-fields">
  <select size="15" multiple="multiple" class="showUniOgrp" id="m-address"></select>
</div>

<div id="hidden-fields">
  <select size="15" multiple="multiple" class="showUniOgrp" id="h-address">
   <optgroup class="og-swe" data-opt="qq" label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup class="og-ger" data-opt="qq" label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
      <option value="bmw">BMW</option>
    </optgroup>
    <optgroup class="og-ita" data-opt="qq" label="Italian Cars">
      <option value="ferrari">Ferrari</option>
      <option value="lamborghini">Lamborghini</option>
    </optgroup>
</select>
</div>

Не тестировался на Safari, но он должен работать.