document.getElementById().style.display = 'none'; only works in Firefox

javascript css internet-explorer google-chrome firefox

37,013

Solution 1

You should bind change event to your select element using .addEventListener method ->

Javascript

function validateForm() {

    alert(); //checking if this actually works

document.getElementById('option2').style.display = 'none';

}


select_ = document.getElementById('employeeID');

select_.addEventListener('change',validateForm,false);

select_.onchange = validateForm;

Chrome

Chrome

Safari

Safari

Solution 2

Change:

document.getElementById('option2').style.display = 'none';

document.getElementById('option2').style.visibility="hidden";

37,013

Author by

user3568981

Updated on November 23, 2020

Comments

user3568981 over 3 years
Why does this only work in Firefox? IE and Chrome seem to ignore the style.display = 'none' Any suggestions?
```
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>


    <script language="JavaScript">
        function validateForm() {

            document.getElementById('option2').style.display = 'none';

       }
    </script>

</head>
<body>
    <select id="employeeID" onchange="validateForm();">
        <option value="0" id="option0">Select an Employee</option>
        <option value="1" id="option1">Employee 1</option>
        <option value="2" id="option2">Employee 2</option>
        <option value="3" id="option3">Employee 3</option>
    </select>
</body>
</html>
```
- Yuriy Galanter about 10 years
  
  Works here in Chrome jsfiddle.net/wdDz4
- Katana314 about 10 years
  
  @YuriyGalanter It does seem to, but my JSFiddle keeps it inside an onchange function and doesn't seem to have the same result. jsfiddle.net/uWQzs
- ssbb about 10 years
  
  @katana314 , if you put it in a function , you need to call this function :)
- DerStrom8 about 10 years
  
  It works for me in Chrome and FF, but not IE11
- Yuriy Galanter about 10 years
  
  @Katana314 HTML cannot find the function. But if it is put in HEAD it works: jsfiddle.net/uWQzs/1
- ssbb about 10 years
  
  same , IE look's to be as powerfull as before
- Mauren about 10 years
  
  IE11 doesn't seem to fire the onchange event.
- DerStrom8 about 10 years
  
  @ssbb, the function is called from the "onchange" attribute in the HTML
- Katana314 about 10 years
  
  Sorry, wasn't aware of JSFiddle's small needs; this one does seem to work. jsfiddle.net/uWQzs/3
- Quentin about 10 years
  
  possible duplicate of style.display='none' doesnt work on option tags in chrome, but it does in firefox, anyone know why? or a workaround?
- gen_Eric about 10 years
  
  I don't think you can apply styles to an <option> tag.
- DerStrom8 about 10 years
  
  It appears some browsers simply do not allow you to hide options. Some higher-end ones, such as Chrome and FF, might but low-end ones, such as IE, probably will not
Anthony Horne about 10 years

Make sure it is actually firing. In the validateForm function ,just add an alert('hello'); or alert(document.getElementById('option2').style.display);
DerStrom8 about 10 years

I take back my comment. I forgot I still had some other debug code in. This works, but it displays the entry as a blank line, rather than removing it altogether
Hille over 9 years

Well, of course, jQuery is "just" a library written in JavaScript; imho the answer is offtopic as the OP is probably perfectly fine relying on a robust, cross-browser JavaScript solution, knowing about jQuery beforehand.
theUtherSide almost 7 years

Agreed. Off-topic. "Just use jQuery" isn't really a solution to the question.