- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
这个问题已经有人问了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>
最佳答案
您将需要第三次选择,其中包含所有隐藏的选项组和选项。您可以以不同的方式使用它来实现您想要的,但这是一种方式:
您在隐藏选择 (#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 上测试过,但应该可以。
关于javascript - 如何在 Safari 中从方框 A 到方框 B 添加和删除带有 <optgroup> 的 <option>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55040476/
用例 在圆 Angular 方框中显示用户上传的照片。该图像将具有横向纵横比,但需要将其裁剪为正方形以适合容器内部。我们决定只显示照片的右侧(使照片的左侧不再可见)。 假设如下 照片无法预处理,我正在
为什么要使用滤波 消除图像中的噪声成分叫作图像的平滑化或滤波操作。信号或图像的能量大部分集中在幅度谱的低频和中频段是很常见的,而在较高频段,感兴趣的信息经常被噪声淹没。因此一个能降低高频成分幅度的
如何在vis js中设置内部可以有标签的形状的大小?例如 代码1: shape: 'circle', color: { border: 'black',
在我的 JLabel/JButton 组件等上,我使用 HTML 来格式化文本。这对于除古吉拉特语之外的所有语言都非常有效。 我使用普通的 ASCII 字母来编码古吉拉特语字母,例如: \u0aae\
我是一名优秀的程序员,十分优秀!