Javascript Drop-Down Not Working
We've been trying to implement a javascript/css drop down menu with hidden tables in a custom content section for a custome page that's being built. The drop down seems to work fine on any page we add it to except inside the Lithium platform. Making a selection from the drop down does not show the hidden section. At this point, through troubleshooting it seems that the javascript is not functioning since the hidden table shows up exactly where it should if we change the CSS display function from "hide" to "show" manually, just not through the function.
Any ideas on what could be causing the issue or how to fix this? We've also opened a support ticket for this issue as well. Unfortunately we've been told as of today that this needs to be functional and ready for the site to go live on Friday of this week. Thanks in advance for any ideas!
<style type="text/css">
.al {display:none}
.ca {display:none}
.ct {display:none}
.ga {display:none}
.il {display:none}
.la {display:none}
.ma {display:none}
.mi {display:none}
.mn {display:none}
.mo {display:none}
.ms {display:none}
.nc {display:none}
.ne {display:none}
.nh {display:none}
.nv {display:none}
.ny {display:none}
.or {display:none}
.sc {display:none}
.tn {display:none}
.tx {display:none}
.va {display:none}
.vt {display:none}
.wa {display:none}
.wi {display:none}
</style>
<script type="text/javascript">
function showHide(cls, show) {
// browser-compatibility
var rule = document.styleSheets[0].rules ? document.styleSheets[0].rules : document.styleSheets[0].cssRules;
for (var j = 0; j < rule.length; j++) {
if (rule[j].selectorText == "." + cls) { //find css selector
rule[j].style.display = (show) ? 'block' : 'none';
}
}
}
function selAction(sel) {
for (var i = 0; i < sel.options.length; i++) {
showHide(sel.options[i].value, i == sel.selectedIndex);
}
}
</script>
<title></title>
</head>
<body>
<table>
<tr>
<td colspan="3">
<select name="type" onChange="selAction(this);">
<strong><option value="et">
Please Select Your State:
</option>
<option value="al">Alabama</option>
<option value="ca">California</option>
<option value="ct">Connecticut</option>
<option value="ga">Georgia</option>
<option value="il">Illinois</option>
<option value="la">Louisiana</option>
<option value="ma">Massachusetts</option>
<option value="mi">Michigan</option>
<option value="mn">Minnesota</option>
<option value="mo">Missouri</option>
<option value="ms">Mississippi</option>
<option value="nc">North Carolina</option>
<option value="ne">Nebraska</option>
<option value="nh">New Hampshire</option>
<option value="nv">Nevada</option>
<option value="ny">New York</option>
<option value="or">Oregon</option>
<option value="sc">South Carolina</option>
<option value="tn">Tennessee</option>
<option value="tx">Texas</option>
<option value="va">Virginia</option>
<option value="vt">Vermont</option>
<option value="wa">Washington</option>
<option value="wi">Wisconsin</option></strong> </select>
</td>
</tr>
<tr class="al">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ca">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ct">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ga">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="il">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="la">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ma">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mi">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mn">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mo">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ms">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nc">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ne">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nh">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nv">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ny">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="or">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="sc">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="tn">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="tx">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="va">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="vt">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="wa">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="wi">
<td>
No issues in your state at this time.
</td>
</tr>
</table>
