I guess I knew I was going to regret saying that. <grin/>
Code:
<!DOCTYPE html>
<html>
<head>
<title>Sales Reps</title>
<style type="text/css">
.unrep { display : none; }
.regions { display : none; }
.states { display : none; }
h6 { font-size: x-large; font-weight: bold; }
</style>
</head>
<body>
<form id="theForm">
<select name="stateChoice">
<option value = "">Select Your State or Region</option>
<option value = "AZ">Arizona</option>
<option value = "*CA">California</option>
<option value = "CO">Colorado</option>
<option value = "ID">Idaho</option>
<option value = "MT">Montana</option>
<option value = "*NV">Nevada</option>
<option value = "NM">New Mexico</option>
<option value = "OR">Oregon</option>
<option value = "*TX">Texas</option>
<option value = "UT">Utah</option>
<option value = "WA">Washington</option>
<option value = "WY">Wyoming</option>
<option value = "Oth">Other</option>
</select>
<div id="theStates">
<div class="states" id="CA">
<select name="regionChoice">
<option value="">Choose a region</option>
<option value="CAN">Northern California</option>
<option value="CAS">Southern California</option>
</select>
</div>
<div class="states" id="NV">
<select name="regionChoice">
<option value="">Choose a region</option>
<option value="NVN">Northern Nevada</option>
<option value="NVS">Southern Nevada</option>
</select>
</div>
<div class="states" id="TX">
<select name="regionChoice">
<option value="">Choose a region</option>
<option value="TXEP">Texas, El Pason only</option>
<option value="TX">Texas, other </option>
</select>
</div>
</div>
</form>
<div id="theReps">
<div class="unrep">
<span class="regions">OR,WA,ID,MT,WY</span>
<h6>Dave Fellows</h6>
<p>
101 W Prairie Shopping Ctr. PMB#352<br />
Hayden, ID 83835<br />
Email: DWFellows2@yahoo.com<br />
Ph: (208) 691-5465<br />
Fx: (208) 772-4025<br />
Areas Served:<br />
OR, WA, ID, MT, & WY
</p>
</div>
<div class="unrep">
<span class="regions">UT,CO,TX</span>
<h6>Woman In Motion</h6>
<p>
McKenzi Maxwell<br />
425 North Locust Ave.<br />
Lindon, UT 84042<br />
Email: Doors3068@aol.com<br />
Office: (801) 785-9852<br />
Areas Served:<br />
Utah, Colorado, Texas (except El Paso)
</p>
</div>
<div class="unrep">
<span class="regions">NVS,AZ,NM,TXEP</span>
<h6>Hansen Sales Group</h6>
<p>
Todd Hansen<br />
3125 E Rock Wren Rd<br />
Phoenix, AZ 85048<br />
Email: Todd@Hansensales.com<br />
Office: (480) 759-5959<br />
Areas Served:<br />
Southern NV, AZ, NM, El Paso TX
</p>
</div>
<div class="unrep">
<span class="regions">CAN,NVN</span>
<h6>Mike Mays</h6>
<p>
4426 Spring Wood Dr.<br />
Napa, CA 94558<br />
Email: DorRep@SBCGlobal.net<br />
Cell: (707) 293-4276<br />
Areas Served:<br />
Northern CA, Northern Nevada
</p>
</div>
<div class="unrep">
<span class="regions">CAS</span>
<h6>Tarca & Associates</h6>
<p>
Mark Tarca<br />
Email: MTarca@Tarcaassociates.com<br />
Office: (888) 461-0008<br />
Areas Served:<br />
Southern California
</p>
</div>
</div><!-- end of theReps -->
<script type="text/javascript">
(
function( )
{
var form = document.getElementById("theForm");
form.stateChoice.onchange = changeStates;
var sels = form.regionChoice;
for ( var s = 0; s < sels.length; ++s )
{
sels[s].onchange = function() { changeRegions(this.value); };
}
// turn off all rep displays
function clearReps( )
{
var divs = document.getElementById("theReps").getElementsByTagName("div");
for ( var d = 0; d < divs.length; ++d )
{
divs[d].style.display = "none";
}
}
function changeStates( )
{
clearReps();
// turn off all state displays
var divs = document.getElementById("theStates").getElementsByTagName("div");
for ( var d = 0; d < divs.length; ++d )
{
divs[d].style.display = "none";
}
var choice = this.value;
// if this state has a separate regions selector, show it...
if ( choice.charAt(0) == "*" )
{
document.getElementById( choice.substring(1) ).style.display = "block";
return; // and do nothing more
}
// not a state that needs another choice, so directly show it as a region:
changeRegions( choice );
}
function changeRegions( toRegion )
{
clearReps();
// convert the region we are looking for into a regular expression
var lookfor = new RegExp( "\\b" + toRegion + "\\b", "i" );
// check all divs...
var divs = document.getElementById("theReps").getElementsByTagName("div");
for ( var d = 0; d < divs.length; ++d )
{
var div = divs[d];
// what regions are served by this rep?
var served = div.getElementsByTagName("span")[0].innerHTML;
if ( lookfor.test(served) )
{
// this rep serves the region requested
div.style.display = "block"; // so show it
}
}
}
} // end of the master anonymous function
)(); // so self-invoke it
</script>
</body>
</html>
This also show the *modern* way to use JavaScript
: So-called "unobtrusive style".