Visualizza div se l'opzione è selezionata in jQuery

Question

Sto tentando di visualizzare un div se una delle due opzioni è selezionata sulla mia pagina. Ecco il menu di selezione:

<select id="graph_select"> 
<option id="pilot_form">Pilot Hours</option> 
<option id="client_form">Client Hours</option> 
</select> 

Qui è la mia prima div per la prima opzione:

<div id="pilot_graph_form" align="center" style="margin:0 auto; display:none;"> 
     <form action="?page=reporter" method="POST" name="graph_form"> 
      <p>From:</p> 
      <select name="start_date"> 
       <cfloop query="date_worked_menu"> 
        <option>#date_worked_menu.date_worked#</option> 
       </cfloop> 
      </select> 
      <br /> 
      <br /> 
      <p>To:</p> 
      <select name="end_date"> 
       <cfloop query="date_worked_menu"> 
        <option>#date_worked_menu.date_worked#</option> 
       </cfloop> 
      </select> 
      <br /> 
      <input class="btn btn-success" type="Submit" name="submit_to_graph" value="Submit" id="submit_to_graph"> 
     </form> 
    </div> 

Ecco il div per la mia seconda opzione:

<div id="client_graph_form" align="center" style="margin:0 auto; display:none;"> 
     <form action="?page=reporter" method="POST" name="graph_form_clients"> 
      <p>From:</p> 
      <select name="client"> 
       <cfloop query="client_menu"> 
        <option value="#client_menu.id#">#client_menu.name#</option> 
       </cfloop> 
      </select> 
      <input class="btn btn-success" type="Submit" name="submit_to_graph" value="Submit" id="submit_to_graph"> 
     </form> 
    </div> 

E qui è il mio Funzione jQuery che ho finora:

<script type="text/javascript"> 
$(function() { 
    $("#graph_select").change(function() { 
     if($("#pilot_form").is(":selected")) { 
      $("#pilot_graph_form").css({"display":"block"}); 
     } 
     else { 
      $("#pilot_graph_form").css({"display":"none"}); 
     } 
     if($("#client_form").is(":selected")) { 
      $("#client_graph_form").css({"display":"block"}); 
     } 
     else { 
      $("#client_graph_form").css({"display":"none"}); 
     } 
    }); 
}); 
</script> 

Answer 1

Prima di tutto si dovrebbe cambiare "id" sulla "opzione" per "valore".

Quindi è possibile utilizzare questo:

$(function() { 
    $("#graph_select").change(function() { 
    var val = $(this).val(); 
    if(val === "pilot_graph_form") { 
     $("#pilot_graph_form").show(); 
     $("#client_graph_form").hide(): 
    } 
    else if(val === "client_form") { 
     $("#client_graph_form").show(); 
     $("#pilot_graph_form").hide(); 
    } 
    }); 
}); 

Answer 2

quando si cambia casella di selezione è possibile elementi FadeIn che si vuole:

$('#graph_select').change(function(){ 
    var divID = $(this).children('option:selected').attr('id'); 
    if(divID == 'pilot_form'){ 
     $('#client_graph_form').fadeOut(1000,function(){ 
      $('#pilot_graph_form').fadeIn(500); 
     }); 
    }else{ 
     $('#pilot_graph_form').fadeOut(1000,function(){ 
      $('#client_graph_form').fadeIn(500); 
     }); 
    } 
}); 

Aggiornato
in altro modo: sarà meglio se si utilizza lo stesso nome con il nome id del div in opzioni:

<select id="graph_select"> 
    <option class="pilot_graph_form">Pilot Hours</option> 
    <option class="client_graph_form">Client Hours</option> 
</select> 

aggiungere stessa classe ad ogni <div>

<div id="client_graph_form" class="forms" 
... 
<div id="pilot_graph_form" class="forms" 

jQuery:

$('#graph_select').change(function(){ 
    var divID = $(this).children('option:selected').attr('class'); 
    $('.forms').fadeOut(1000,function(){ 
     $('#'+divID).fadeIn(500); 
    }); 
}); 

Answer 3

$(function() { 
    $("#graph_select").change(function() { 
    if ($("#pilot_form").is(":selected")) { 
     $("#pilot_graph_form").show(); 
     $("#client_graph_form").hide(); 
    } else { 
     $("#pilot_graph_form").hide(); 
     $("#client_graph_form").show(); 
    } 
    }).trigger('change'); 
}); 

DEMO

Answer 4

codice va bene, ci potrebbe essere un problema con carico jQuery, io suggerirei di utilizzare

$(window).load(function(){ 
     //Code 
    });