style.display not working in Chrome, Safari - Firefox, IE11 OK
Question
I have a simple form with cross-browser issues. The form has two select lists, “class_chorus” and “accompaniment”. On page load, class_chorus is displayed and accompaniment is hidden. If the user selects the Children's Chorus option, the accompaniment select list should display. It works correctly in Firefox 35 and IE11. I cannot get it to work in Chrome 40 or Safari 5.1.7. What am I missing here?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form method="post" action="">
<table id="formTable" border="0">
<tr valign="top" style="margin-bottom:0">
<td>Class/Chorus </td>
<td>
<select name="class_chorus" size="1">
<option value="" onclick="hideAccomp();">Any</option>
<option value="Preschool" onclick="hideAccomp();">Early Childhood</option>
<option value="Elementary" onclick="hideAccomp();">Elementary</option>
<option value="Childrens Chorus" onclick="showAccomp();">Children's Chorus</option>
</select>
</td>
</tr>
<tr valign="top" style="margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0">
<td>
<div id="accomp" style="display:none"><br />
Accompaniment<br /><br />
</div>
</td>
<td>
<div id="accomp2" style="display:none"><br />
<select name="accompaniment" id="accompaniment" size="1" >
<option value="">Any</option>
<option value="None">None</option>
<option value="Piano">Piano</option>
</select>
</div><br />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function showAccomp() {
document.getElementById("accomp").style.display = "inline";
document.getElementById("accomp2").style.display = "inline";
}
function hideAccomp() {
document.getElementById("accomp").style.display = "none";
document.getElementById("accomp2").style.display = "none";
}
</script>
</body>
</html>
3 answers
solution1
1 2015-02-10 21:49:18
No you don't need to use jQuery, the problem isn't your Javascript but rather your HTML. The onclick attribute is not supported in Chrome and IE when used on option elements. The best cross browser method would be to use the onchange attribute on your select (remove all onclicks on the option tags) and then write a third function to determine whether to call the show or hide functions you wrote.
Your new HTML:
<select name="class_chorus" size="1" onChange="checkValue(this.selectedIndex)"> <option value="">Any</option> <option value="Preschool">Early Childhood</option> <option value="Elementary">Elementary</option> <option value="Childrens Chorus">Children's Chorus</option> </select>
Your new JS function:
function checkValue(index) { if(index == 3) showAccomp(); else hideAccomp(); }
Bear in mind that this assumes your Children's Chorus value is always fourth in the list. If that position could change periodically, it might be better to get the value itself and compare that instead.
solution2
1 ACCPTED 2015-02-10 22:02:53
You are probably running into issues as a result of putting the event listener on the individual <option> elements, rather than the <select> (browsers are VERY picky about what you can do with <option> elements).
Try binding a function to the onchange for the <select> , instead, and then, when the value changes, get the new value and trigger the correct function based on that.
Trying to use the code that you already have, you could do something like this:
<select name="class_chorus" size="1" onchange="toggleAccomponement(event);">
<option value="">Any</option>
<option value="Preschool">Early Childhood</option>
<option value="Elementary">Elementary</option>
<option value="Childrens Chorus">Children's Chorus</option>
</select>
. . . and then, in the <script> section:
function toggleAccomponement(event) {
var sCurrSelection = event.target.value;
if (sCurrSelection === "Childrens Chorus") {
showAccomp();
}
else {
hideAccomp();
}
}
solution3
-2 2015-02-10 21:40:08
better Use JQuery show() http://api.jquery.com/show/
and hide() http://api.jquery.com/hide/
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.