Question

Updated: I would like to control the visibility of the bottom divs based on the value of the top SELECT..

i.e

selected = dogs:: only bulldog, pitbull visible
selected = fish:: GOLDFISH! visible

etc..

Appreciate it.. Sorry I didn’t do a better job of explaining my question initially –

<select>
  <option value="dog">dog</option>
  <option value="cat">cat</option>
  <option value="fish">fish</option>
</select>

<div id="dog">bulldog</div>
<div id="cat">stray cat</div>
<div id="dog">pitbull</div>
<div id="cat">alley cat</div>
<div id="fish">GOLDFISH!</div>

Answer 1

<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
function selectionChanged(){
HideAll();
var selected=$('#pets option:selected').text();
var selectString='.';
selectString+=selected;
$(selectString).show();
};
function HideAll(){
$('.dog').hide();
$('.cat').hide();
$('.fish').hide();
};
</script>

<select id="pets" onchange="selectionChanged()">
    <option>dog</option>
    <option>cat</option>
    <option>fish</option>
  </select>

<div id=somepets>
  <div class="dog">bulldog</div>
  <div class="cat">stray cat</div>
  <div class="dog">pitbull</div>
  <div class="cat">alley cat</div>
  <div class="fish">GOLDFISH!</div>
</div>