如何添加和删除 同 在Safari中从方框A到方框B？

Question

这个问题已经被问到了here并且它得到了很好的回答，但问题是它在Safari中无法像在Chrome中那样正常工作。在Safari中，optgroup和option都不支持display: none。

有没有办法让它像Chrome一样工作？

这是codepen Snippet

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

您将需要第三个选择，其中包含隐藏的所有optgroups和选项。您可以通过不同的方式使用它来实现您想要的效果，但这是一种方式：

您拥有隐藏选择（#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上测试，但它应该工作。