pokaż/ukryj div na podstawie opcji zaznacz jquery

Question

Oto mój kod. Dlaczego to nie działa?

<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

Używasz kodu przed DOM jest załadowany.

Spróbuj tego:

żywo przykład:

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

tracisz :selected na pokrętle dla show() - patrz jQuery documentation na przykład, jak to wykorzystać.

W twoim przypadku to prawdopodobnie będzie wyglądać mniej więcej tak:

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

Answer 3

Aby pokazać div przy wyborze jednej wartości i ukryć podczas wybierając inną wartość z rozwijanej listy: -

$('#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> 

Wykonaj tę operację dla każdej wartości