選択オプションを変更した後にonchangeイベントが機能しないコード

Question

次のスクリプトは初めて起動しますが、5つの選択ドロップダウンの変更はありません。コードが初めて動作しない理由と、このコードを最適化できる理由をご案内してください。

<script> 
      $(document).ready(function(){ 
       $('#cfy1').change(function() { 
         var selectedOption = $('#cfy1 option:selected'); 
         $('#show_finyear').html(selectedOption.val()); 
       }); 
       $('#cmd2').change(function() { 
         var selectedOption = $('#cmd2 option:selected'); 
         $('#show_commandName').html(selectedOption.val()); 
       }); 
       $('#Stn3').change(function() { 
         var selectedOption = $('#Stn3 option:selected'); 
         $('#show_stationName').html(selectedOption.val()); 
       }); 
       $('#status4').change(function() { 
         var selectedOption = $('#status4 option:selected'); 
         $('#show_statusList').html(selectedOption.val()); 
       }); 
       $('#cfa5').change(function() { 
         var selectedOption = $('#cfa5 option:selected'); 
         $('#show_cfaList').html(selectedOption.val()); 
       }); 
       var finyear  = $("#show_finyear").html(); 
       var cmdname  = $("#show_commandName").html(); 
       var stnname  = $("#show_stationName").html(); 
       var statusname = $("#show_statusList").html(); 
       var cfaname  = $("#show_cfaList").html(); 
       $.ajax({ 
         url:"get_value.php", 
         method:"POST", 
         data:{finyear:finyear,cmdname:cmdname,stnname:stnname,statusname:statusname,cfaname:cfaname}, 
         success:function(data){ 
          $('#recordsfromraky').html(data); 
         } 
       }); 

      }); 

     </script> 

否定的な投票をしないでください。これらの種類のビットを使用できる人は多くいます。ありがとうございました。

Answer 1

これはdev8080

<script> 

      $(document).ready(function(){ 
      $('#cfy1').change(function() { 
        var selectedOption = $('#cfy1 option:selected'); 
        $('#show_finyear').html(selectedOption.val()); 
        fetchChange(); 
      }); 
      $('#cmd2').change(function() { 
        var selectedOption = $('#cmd2 option:selected'); 
        $('#show_commandName').html(selectedOption.val()); 
        fetchChange(); 
      }); 
      $('#Stn3').change(function() { 
        var selectedOption = $('#Stn3 option:selected'); 
        $('#show_stationName').html(selectedOption.val()); 
        fetchChange(); 
      }); 
      $('#status4').change(function() { 
        var selectedOption = $('#status4 option:selected'); 
        $('#show_statusList').html(selectedOption.val()); 
        fetchChange(); 
      }); 
      $('#cfa5').change(function() { 
        var selectedOption = $('#cfa5 option:selected'); 
        $('#show_cfaList').html(selectedOption.val()); 
        fetchChange(); 
      }); 

     }); 
     fetchChange(); 
     function fetchChange() { 
       var finyear = $("#show_finyear").html(); 
       var cmdname = $("#show_commandName").html(); 
       var stnname = $("#show_stationName").html(); 
       var statusname = $("#show_statusList").html(); 
       var cfaname  = $("#show_cfaList").html(); 
       window.alert('yep'); 
       $.ajax({ 
         url:"get_value.php", 
         method:"POST", 
         data:{finyear:finyear,cmdname:cmdname,stnname:stnname,statusname:statusname,cfaname:cfaname}, 
         success:function(data){ 
          $('#recordsfromraky').html(data); 
         } 
       }); 
      }; 
    </script> 

Answer 2

は、おそらくあなたは、あなたのハンドラの各にAJAXの呼び出しを必要とするconcept-を理解しています。念のため

-

<script> 
     var fetchChange = function(){ 
       var finyear  = $("#show_finyear").html(); 
       var cmdname  = $("#show_commandName").html(); 
       var stnname  = $("#show_stationName").html(); 
       var statusname = $("#show_statusList").html(); 
       var cfaname  = $("#show_cfaList").html(); 
       $.ajax({ 
         url:"get_value.php", 
         method:"POST", 
         data:{finyear:finyear,cmdname:cmdname,stnname:stnname,statusname:statusname,cfaname:cfaname}, 
         success:function(data){ 
          $('#recordsfromraky').html(data); 
         } 
       }); 
      }; 

      $(document).ready(function(){ 
      $('#cfy1').change(function() { 
        var selectedOption = $('#cfy1 option:selected'); 
        $('#show_finyear').html(selectedOption.val()); 
        fetchChange(); 
      }); 
      $('#cmd2').change(function() { 
        var selectedOption = $('#cmd2 option:selected'); 
        $('#show_commandName').html(selectedOption.val()); 
        fetchChange(); 
      }); 
      $('#Stn3').change(function() { 
        var selectedOption = $('#Stn3 option:selected'); 
        $('#show_stationName').html(selectedOption.val()); 
        fetchChange(); 
      }); 
      $('#status4').change(function() { 
        var selectedOption = $('#status4 option:selected'); 
        $('#show_statusList').html(selectedOption.val()); 
        fetchChange(); 
      }); 
      $('#cfa5').change(function() { 
        var selectedOption = $('#cfa5 option:selected'); 
        $('#show_cfaList').html(selectedOption.val()); 
        fetchChange(); 
      }); 

     }); 

    </script> 

私も、AJAX呼び出しが行われている間、一時的に選択を無効にすることをお勧めします。