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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15025555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 05:49:51  来源:igfitidea点击:

option.style.display = "none" not working in safari

javascripthtmlcsshtml-select

提问by BeNdErR

This is the example I'm working on: http://jsfiddle.net/4suwY/5/

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

HTML:

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:

JS:

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

As you can see, it works in chrome, but it does not work in safari.. What it should do, is hide the "I'M THE CHOSEN ONE" option when you click the dropdown menu..

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

This is another test I made: http://jsfiddle.net/4suwY/11/

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

Same HTML, this is the JS:

相同的 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";

Anyway, what I need to do is display an option as selected (current), and hide to the user when the dropdown menu is opened, so he can't choose it.

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

Any suggestion / workaround? I don't see any error. What's wrong with Safari? Should I change approach? Jquery seems not to help.

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



EDITS:

编辑:

I need to hide the options in the dropdownmenu, but at the same time I need to show this option "value" as the selected value! For example, the "closed" dropdown will show the value "I'M THE CHOSEN ONE", but if I click and open the menu, the only visible options will be "hello, asd, wer, qwe"..

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

回答by Barney

You can't toggle display on <option>elements in Safari (or IE, for that matter). This is part of a long and inconsistent tradition with Safari restricting CSS styling functionality on form elements, believing the visual language of interactive elements should be consistent with the OS (no point trying to find a rationale for IE's failings).

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

Your only options are either to remove it (and re-append it later), or to set it to optnz.disabled = true. Sorry for the bad news!

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