Hiển thị div nếu tùy chọn được chọn trong jQuery

Question

Tôi đang cố gắng hiển thị div nếu một trong 2 tùy chọn được chọn trên trang của tôi. Dưới đây là chọn menu:

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

Đây là div đầu tiên của tôi cho các tùy chọn đầu tiên:

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

Đây là div cho lựa chọn thứ hai của tôi:

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

Và đây là của tôi Hàm jQuery tôi có cho đến thời điểm này:

<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

Trước hết bạn nên thay đổi "id" trên "tùy chọn" thành "giá trị".

Sau đó, bạn có thể sử dụng này:

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

khi thay đổi chọn hộp bạn có thể yếu tố fadeIn mà bạn muốn:

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

Cập nhật
theo cách khác: nó sẽ tốt hơn nếu bạn sử dụng cùng tên với tên id div vào tùy chọn:

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

thêm cùng lớp với nhau <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

Mã là alright, có thể có một vấn đề với tải jquery, tôi muốn đề nghị bạn sử dụng

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