Display:none doesn't work in some browsers
Question
My problem is that display:none doesn't work in some browsers. The function will be executed when i select a option in a selection. It works in firefox but not in safari. Must i add Touch events. 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 answers
solution1
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.
solution2
0 2020-12-06 17:56:12
For HTML5, you can use the 'hidden' attribute.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
display: none doesn't work
jQuery .hide() doesn't work in some browsers
Angularjs doesn't work for display none style
Display:none doesn't work in jQuery
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=“none”; doesn't work with javascript DOM
Javascript display none doesn't work while cookie
Javascript manipulation of display:none doesn't work properly
Related Tags