jQuery - Controlling div visibility with a Select Box

Updated: I would like to control the visibility of the bot开发者_JAVA百科tom 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>

Try this

$('#pets').change(function() {
    $('#somepets div').hide();
    $('#somepets div.' + $(this).val()).show();
});

But for this you should change your class names to match the values of the options. Also you need to give your "select" element an ID.

EDIT: To clarify a bit, this selector is going to try and find the select element by its ID "pets" so you need to add id="pets". The name and ID can be the same value.

EDIT: Since you're having some trouble with the HTML here is what it would need to look like to work with my method.

<select id="pets">
  <option value="dog">dog</option>
  <option value="cat">cat</option>
  <option value="fish">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>

<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>