I think I have a pretty standard select, div, js setup:

<select id="riverdale">
<option value="opt1">Archie</option>
<option value="opt2">Jughead</option>
<option value="opt3">Betty</option>
<option value="opt4">Veronica</option>
</select>

<div id="opt1">stuff about archie</div>
<div id="opt2">stuff about jughead</div>
<div id="opt3">stuff about betty</div>
<div id="opt4">stuff about veronica</div>
<div id="opt1">more stuff about archie</div>
<div id="opt1">even more stuff about archie</div>
<div id="opt4">more stuff about veronica</div>
<div id="opt3">more stuff about betty</div>
<div id="opt1">even way more stuff about archie</div>
<div id="opt2">more stuff about jughead</div>

<script type="text/javascript">
$("#riverdale").change(function(){
$("#" + this.value).show().hide();
});
$("#riverdale").change();
</script>

By default, the opt1 should be shown when the page opens and the user sees:

stuff about archie
more stuff about archie
even more stuff about archie
even way more stuff about archie

If the user selects the Betty select dropdown, they will see:

stuff about betty
more stuff about betty

Change the select option and all the stuff about archie becomes display:none to show the other character chosen. As you can see from my example, there will be countless div's, maybe hundreds or thousands, but no matter what, the div's that are displayed are the ones that match the select option.

I can either get opt1 to display and nothing changes, or get all four character information displayed and the select does not function at all. Please help. Thanks.