How can I show and hide elements based on selected option with jQuery?

Question

Here is my code. Why it doesn't work?

<Script>     $('#colorselector').change(function() {         $('.colors').hide();         $('#' + $(this).val()).show();  }); </Script> <Select id="colorselector">    <option value="red">Red</option>    <option value="yellow">Yellow</option>    <option value="blue">Blue</option> </Select> <div id="red" class="colors" style="display:none"> .... </div> <div id="yellow" class="colors" style="display:none"> ... </div> <div id="blue" class="colors" style="display:none"> ... </div> 

Answer 1

You're running the code before the DOM is loaded.

Try this:

Live example:

http://jsfiddle.net/FvMYz/

$(function() {    // Makes sure the code contained doesn't run until                   //     all the DOM elements have loaded      $('#colorselector').change(function(){         $('.colors').hide();         $('#' + $(this).val()).show();     });  });