mostrar/ocultar div basado en la opción de selección jquery

Question

Aquí está mi código. ¿Por qué no funciona?

<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

se está ejecutando el código antes de que se cargue el DOM.

Prueba esto:

ejemplo vivo:

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(); 
    }); 

}); 

Answer 2

Usted se echa en falta un :selected en el selector de show() - ver el jQuery documentation para un ejemplo de cómo utilizar este.

En su caso es probable que algo como esto:

$('#'+$('#colorselector option:selected').val()).show(); 

Answer 3

Para mostrar el div mientras que la selección de un valor y ocultar al seleccionar otro valor de la lista desplegable: -

$('#yourselectorid').bind('change', function(event) { 

      var i= $('#yourselectorid').val(); 

      if(i=="sometext") // equal to a selection option 
      { 
       $('#divid').show(); 
      } 
      elseif(i=="othertext") 
      { 
       $('#divid').hide(); // hide the first one 
       $('#divid2').show(); // show the other one 

       } 
}); 

Answer 4

<script> 
$(document).ready(function(){ 
    $('#colorselector').on('change', function() { 
     if (this.value == 'red') 
     { 
     $("#divid").show(); 
     } 
     else 
     { 
     $("#divid").hide(); 
     } 
    }); 
}); 
</script> 

Haga lo siguiente para cada valor