I have a web page that uses drop down list, which dynamically changes based on actions on the page. This works great in firefox and chrome, but fails in internet explorer.
I found multiple entries with similar issues, and they all refer to problems in the html syntax. I checked the complete syntax of the page, which is troublesome because the page is partly client side generated by a javascript. However, I can not find any html syntax issues.
I decided to make a small test page with a small script to focus on this specific part. This page has the exact same behavior. In firefox the hide/show of the drop down list works normally, while it fails in IE9. I included the alerts to confirm that the event is actually passed to the script, which is the case. It is just the show and hide which fails on the drop down entries. On other elements in the page I do not have an issue with the hide and show functions.
When I check in IE's developer tool (F12 developer tools), I can clearly see that the display attribute is properly set. However the list items remain visible.
How can I get the show and hide to work properly for drop down lists in IE9?
The page code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Test</h1>
<select id="list">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input id="hide" type="button" value="Hide">
<input id="show" type="button" value="Show">
<p id="text">Test to see if this can be hidden.</p>
</body>
</html>
The script.js code:
function setHideHandler(state)
{
if (state)
{
$("#hide").on("click", function(event) {
hideList();
});
}
else
{
$("#hide").off();
}
}
function setShowHandler(state)
{
if (state)
{
$("#show").on("click", function(event) {
showList();
});
}
else
{
$("#show").off();
}
}
function hideList()
{
$("#list option").each(function() {
var name = $(this).text();
alert("Hiding: " + name);
$(this).hide();
});
$("#text").hide();
}
function showList()
{
alert("Show");
$("#list option").each(function() {
var name = $(this).text();
alert("Showing: " + name);
$(this).show();
});
$("#text").show();
}
$(document).ready(function() {
setHideHandler(true);
setShowHandler(true);
});
