Display:none 在某些瀏覽器中不起作用
[英]Display:none doesn't work in some browsers
問題描述
我的問題是 display:none 在某些瀏覽器中不起作用。 function 將在我 select 選擇中的一個選項時執行。 它在 firefox 中有效，但在 safari 中無效。我必須添加 Touch 事件嗎？ 實際上我認為當我在選擇中添加一個選項時，我不會在瀏覽器中顯示。
我希望有人能幫助我...
這是我的腳本：
<: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
隱藏的選項菜單在某些移動瀏覽器上不起作用。 使用條件（JS 和 CSS 類）隱藏或查看選項。
解決方案2
0 2020-12-06 17:56:12
對於 HTML5，您可以使用“隱藏”屬性。
<option hidden>Hidden option</option>
你可以試試這個
<: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.