Question

这个问题已经here被提出，并且可以很好地回答，但问题是它无法像在Chrome中一样在Safari中正常工作。在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

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

您将所有信息都保存在隐藏的选择（#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上进行过测试，但应该可以使用。

如何在Safari中将带有</option> <optgroup>的<option>从框A添加到框B并从框B中删除？

1 个答案: