document.getElementById().style.display = 'none'; only works in Firefox
Question
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>
3 answers
solution1
2 2014-04-24 13:44:05
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);
or
select_.onchange = validateForm;
Chrome
Safari
solution2
1 2014-04-24 13:44:52
Change:
document.getElementById('option2').style.display = 'none';
to
document.getElementById('option2').style.visibility="hidden";
solution3
-3 2015-01-28 16:22:53
Browsers such as Chrome prefer to use jQuery now instead of JavaScript so change:
document.getElementById('option2').style.display = 'none';
to read like so to hide:
$('#option2').hide();
And to show it again use:
$('#option2').show();
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
document.getElementById("").style.display='none'; is not working
“document.getElementById(div).style.display = none” not working
document.getElementById(“popup_upload”).style.display='none not working
Is there an Angular way of doing: document.getElementById(id).style.display = "none";
Used :-— setTimeout(function(){ document.getElementById('sing-in-block').style.display='none';}, 1000);
How to add transition into Javascript document.getElementById(“myDIV”).style.display = “none”;
document.getElementById().style.display = 'block'; Not working
document.getElementById(“test”).style.display=“hidden” not working
document.getElementById('').style.display='block'; not working in Wordpress
Javascript document.getElementById('').style.display = "block" NOT WORKING
Related Tags