Anzeige div, wenn Option in jQuery ausgewählt ist

Question

Ich versuche, ein div anzuzeigen, wenn eine von 2 Optionen auf meiner Seite ausgewählt ist. Hier ist das Auswahlmenü:

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

Hier ist meine erste div für die erste Option:

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

Hier ist die div für meine zweite Option:

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

Und hier ist mein jQuery Funktion Ich habe bis jetzt:

<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

Zunächst einmal sollten Sie "id" auf "Option" auf "Wert" ändern.

Dann können Sie diese verwenden:

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

wenn Auswahlbox Ändern können Sie fadeIn Elemente, die Sie wollen:

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

Aktualisiert
in anderer Art und Weise: es wird besser sein, wenn Sie die mit div in Optionen Namen id gleiche Namen verwenden:

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

hinzufügen gleiche Klasse zu jedem <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

-Code in Ordnung ist, könnte es ein Problem mit dem Laden jquery sein, würde ich vorschlagen, dass Sie

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