option.style.display = "none" 在 safari 中不起作用

IT技术 javascript html css html-select
2021-03-04 14:01:04

这是我正在处理的示例:http : //jsfiddle.net/4suwY/5/

HTML:

<select id="asd">
    <option>hello</option>
    <option>I'M THE CHOSEN ONE</option>
    <option>asd</option>
    <option>wer</option>
    <option>qwe</option>
</select>

JS:

var sel = document.getElementById("asd");
var optnz = sel.getElementsByTagName("option")[1];
sel.value = optnz.value;
optnz.style.display = "none";

如您所见,它在 chrome 中工作,但在 safari 中不起作用..它应该做的是,当您单击下拉菜单时隐藏“我是被选中的人”选项。

这是我做的另一个测试:http : //jsfiddle.net/4suwY/11/

相同的 HTML,这是 JS:

var sel = document.getElementById("asd");
var opt = document.createElement("option");
opt.innerHTML = "YAYA";
opt.value = "YAYA";
sel.appendChild(opt);
sel.value = "YAYA";
opt.style.display = "none";

无论如何,我需要做的是将选项显示为已选择(当前),并在打开下拉菜单时向用户隐藏,因此他无法选择它。

任何建议/解决方法?我没有看到任何错误。Safari 有什么问题?我应该改变方法吗?Jquery 似乎没有帮助。


编辑:

我需要隐藏下拉菜单中的选项,但同时我需要将此选项“值”显示为所选值!例如,“已关闭”下拉列表将显示值“我是被选中的人”,但如果我单击并打开菜单,则唯一可见的选项将是“hello、asd、wer、qwe”。

1个回答

您无法<option>在 Safari(或 IE,就此而言)中的元素上切换显示这是 Safari 在表单元素上限制 CSS 样式功能的长期且不一致的传统的一部分,认为交互元素的视觉语言应该与操作系统一致(试图为 IE 的失败寻找理由毫无意义)。

您唯一的选择是将其删除(并稍后重新附加),或将其设置为optnz.disabled = true. 关于这些坏消息我很遗憾!

或使用 visibility: hidden
2021-04-25 14:01:04
显示:无;<ul> 元素在移动设备上对我来说效果很好,但在笔记本电脑上则不行
2021-04-26 14:01:04
@JDrake 可见性:隐藏不起作用
2021-04-29 14:01:04
那拯救了我的一天
2021-05-09 14:01:04