Display div if option is selected in jQuery
when changing select box you can fadeIn elements that you want :
$('#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);
});
}
});
Updated
in other way :
it will be better if you use same name with div's id name in options :
<select id="graph_select">
<option class="pilot_graph_form">Pilot Hours</option>
<option class="client_graph_form">Client Hours</option>
</select>
add same class to each <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);
});
});
$(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
First of all, you should change "id" on your "option" to "value".
Then you can use this:
$(function () {
$("#graph_select").change(function() {
var val = $(this).val();
if(val === "pilot_form") {
$("#pilot_graph_form").show();
$("#client_graph_form").hide();
}
else if(val === "client_form") {
$("#client_graph_form").show();
$("#pilot_graph_form").hide();
}
});
});