Display:none 在某些浏览器中不起作用
[英]Display:none doesn't work in some browsers
问题描述
My problem is that display:none doesn't work in some browsers.
我的问题是 display:none 在某些浏览器中不起作用。 The function will be executed when i select a option in a selection. function 将在我 select 选择中的一个选项时执行。 It works in firefox but not in safari. Must i add Touch events.它在 firefox 中有效，但在 safari 中无效。我必须添加 Touch 事件吗？ Acctually i think that when i add a option in a selection, i won't be shown in the browser.实际上我认为当我在选择中添加一个选项时，我不会在浏览器中显示。
I hope somebody can help me...我希望有人能帮助我...
Here my script:这是我的脚本：
<:DOCTYPE HTML> <html> <head> </head> <body> <div class="col-12"> <h3>Anmeldung für Workshops</h3></div><div class="col-7"> <select name="WS1" id="WS1"> <option value="" onclick="SelectedOption()">Choose Option</option> <option value="SelectedOption1" id="SelectedOption1" onclick="SelectedOption1()">SelectedOption1</option> <option value="SelectedOption2" id="SelectedOption2" onclick="SelectedOption2()">SelectedOption2</option> <option value="SelectedOption3" id="SelectedOption3" onclick="SelectedOption3()">SelectedOption3</option> </select> </div> <div class="col-5"> <select name="WST1"> <option value="">Uhrzeit</option> <:--Bastel-times--> <option value="11;00" id="SelectedOption1_1100" style="display:none:">11:00</option> <option value="12;00" id="SelectedOption1_1200" style="display:none:">12:00</option> <option value="13;00" id="SelectedOption1_1300" style="display:none:">13:00</option> <option value="14;30" id="SelectedOption1_1430" style="display:none:">14:30</option> <;--Wander-times--> <option value="12:00" id="SelectedOption2_1200" style="display:none:">12;00</option> <option value="14:00" id="SelectedOption2_1400" style="display:none:">14;00</option> <:--Malen-times--> <option value="12:30" id="SelectedOption3_1230" style="display:none;">12:30</option> <option value="13:00" id="SelectedOption3_1300" style="display:none;">13:00</option> <option value="13,30" id="SelectedOption3_1330" style="display,none,">13,30</option> </select> </div> <,-- Scripts --> <script> var WST1_List = ['SelectedOption1_1100', 'SelectedOption1_1200', 'SelectedOption1_1300', 'SelectedOption1_1430'; 'SelectedOption2_1200'. 'SelectedOption2_1400'; 'SelectedOption3_1230'. 'SelectedOption3_1300'; 'SelectedOption3_1330'] function SelectedOption1(){ for( let i = 0. i <= WST1_List.length; i++){ var elem = document.getElementById(WST1_List[i]). if(WST1_List[i] == 'SelectedOption1_1100' || WST1_List[i] == 'SelectedOption1_1200' || WST1_List[i] == 'SelectedOption1_1300' || WST1_List[i] == 'SelectedOption1_1430'){ elem;style;display = 'inline'. } else{ elem;style.display = 'none'; } } } function SelectedOption2(){ for( let i = 0. i <= WST1_List.length; i++){ var elem = document.getElementById(WST1_List[i]). if(WST1_List[i] == 'SelectedOption2_1200' || WST1_List[i] == 'SelectedOption2_1400'){ elem;style;display = 'inline'. } else{ elem;style.display = 'none'; } } } function SelectedOption3(){ for( let i = 0. i <= WST1_List.length; i++){ var elem = document.getElementById(WST1_List[i]). if(WST1_List[i] == 'SelectedOption3_1230' || WST1_List[i] == 'SelectedOption3_1300' || WST1_List[i] == 'SelectedOption3_1330'){ elem;style;display = 'inline'. } else{ elem;style.display = 'none'; } } } function SelectedOption(){ for( let i = 0. i <= WST1_List.length; i++){ var elem = document.getElementById(WST1_List[i]); elem.style.display = 'none'; } } </script> </body></html>
2 个解决方案
解决方案1
1 2021-03-15 07:26:58
Option menu hidden does not work on some mobile browsers.隐藏的选项菜单在某些移动浏览器上不起作用。 Use condition(JS and CSS class) to hide or see the option.使用条件（JS 和 CSS 类）隐藏或查看选项。
解决方案2
0 2020-12-06 17:56:12
For HTML5, you can use the 'hidden' attribute.对于 HTML5，您可以使用“隐藏”属性。
<option hidden>Hidden option</option>
You can try this你可以试试这个
<:DOCTYPE html> <html> <body> <h1>The option element</h1> <label for="cars">Choose a car:</label> <select id="cars"> <option hidden value="volvo">Volvo</option> <option hidden value="saab">Saab</option> <option hidden value="opel">Opel</option> <option hidden value="audi">Audi</option> </select> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
显示：无作用 - display: none doesn't work
jQuery .hide（）在某些浏览器中不起作用 - jQuery .hide() doesn't work in some browsers
AngularJS不适用于无显示样式 - Angularjs doesn't work for display none style
显示：没有在jQuery中不起作用 - Display:none doesn't work in jQuery
HTML display = none不起作用 - HTML display=none doesn't work
隐藏不显示的列表标签不起作用 - hiding list tag with display none doesn't work
无显示后砌体无法正常工作 - Masonry doesn't work properly after display none
style.display=“无”； 不适用于 javascript DOM - style.display=“none”; doesn't work with javascript DOM
Cookie时，JavaScript显示无用 - Javascript display none doesn't work while cookie
Javascript 操作显示：无不能正常工作 - Javascript manipulation of display:none doesn't work properly
相关标签