CODEWITHSUNDEEP
javascripthtmlbrowserdisplay
Foxel05
Foxel05

Reputation: 1

Display:none doesn't work in some browsers

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>

Upvotes: 0

Views: 437

Answers (2)

Mijanur Rahman
Mijanur Rahman

Reputation: 1182

Option menu hidden does not work on some mobile browsers. Use condition(JS and CSS class) to hide or see the option.

Upvotes: 1

MD Jahid Hasan
MD Jahid Hasan

Reputation: 1113

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>

Upvotes: 0

Related Questions