javascript - Display:none 在某些浏览器中不起作用

问题描述

我的问题是 display:none 在某些浏览器中不起作用。当我在选择中选择一个选项时，将执行该功能。它适用于 Firefox，但不适用于 safari。我必须添加触摸事件。实际上，我认为当我在选择中添加选项时，我不会显示在浏览器中。

我希望有人可以帮助我...

这是我的脚本：

<!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>

标签： javascripthtmlbrowserdisplay

javascript - Display:none 在某些浏览器中不起作用

问题描述

解决方案

推荐阅读