javascript - 如何在 Safari 中从方框 A 到方框 B 添加和删除带有 <optgroup> 的 <option>？

Question

这个问题已经有人问了here它得到了完美的回答，但问题是它不能像在 Chrome 中那样在 Safari 中正常工作。在 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

您将需要第三次选择，其中包含所有隐藏的选项组和选项。您可以以不同的方式使用它来实现您想要的，但这是一种方式:

您在隐藏选择 (#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 上测试过，但应该可以。