Cycle Through Style Sheets [Archive]

chappy01

12-15-2011, 11:52 PM

We've been attempting to set up a drop-down selection box with hidden tables under it for use on a company website. The site has a lot of CSS sheets (like 20 of them) and more could be added at any point so we'd like to write the code to cycle through each one of them to find the correct variable associated with the selections in the drop-down. The code below works fine in dreamweaver, even with the multiple sheets attached, but stops working immediately when putting it in a browser. Any thoughts/suggestions are greatly appreciated.

<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) {
for (var i=0; i<document.styleSheets.length; i++) {
// browser-compatibility
var rule = document.styleSheets[i].rules ? document.styleSheets[i].rules : document.styleSheets[i].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>
</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>
</center></td>
</tr>
</table>
</body>
</html>