使用Jquery檢測下拉列表中的更改

Question

我在Jquery中創建了兩個下拉列表。當某個事件發生時，第一個下拉列表中的選項將填充到函數中。

然後基於在所述第一下拉選擇，第二個下拉應該利用第二函數，基本上檢測第一下拉的變化來填充。但是，第二個函數沒有檢測到任何變化，我找不到原因。我提供兩種功能 -

這是第一個功能 -

$(document).on("click", ":submit", function(e){ 
    e.preventDefault(); 
    var y = $(this).attr('id'); 

    if(y.substring(0,6)==='CTopic'){ 
     var x = $(this).attr('id').substring(6); 
     $('#CTopic'+x).hide(); 
     $('#AnsTopic'+x).append('<option value="All">All</option'); 
     $('#AnsTopic'+x).append('<option value="Kinematics">Kinematics</option>'); 
     $('#AnsTopic'+x).append('<option value="Mechanics">Mechanics</option>'); 
     $('#AnsSubTopic'+x).append('<option value="All">All</option'); 
     $('#AnsTopic'+x).show(); 
     $('#AnsSubTopic'+x).show(); 
    } 
}); 

這裏是第二個功能 -

$(document).ready(function() { 
    $("[id^='AnsTopic']").change(function() { 
     var x = $(this).attr('id').substring(8); 

     $('#AnsSubTopic'+x).html(''); 
     switch($(this).val()) { 
      case 'All': 
       $('#AnsSubTopic'+x).append('<option value="All">All</option>'); 
      break; 
      case 'Kinematics': 
       $('#AnsSubTopic'+x).append('<option value="All">All</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Vectors">Vectors</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Motion">Motion</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Projectile">Projectile</option>'); 
      break; 
      case 'Mechanics': 
       $('#AnsSubTopic'+x).append('<option value="All">All</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Newton Law">Newton Law</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Friction">Friction</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Circular Motion">Circular Motion</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Work-Energy">Work-Energy</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Momentum-Collision">Momentum-Collision</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Rotational Dynamics">Rotational Dynamics</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Gravitation">Gravitation</option>'); 
      break; 
     } 
    }); 
}); 

只是爲了澄清AnsTopic是第一個列表，AnsSubTopic是第二個列表。任何建議，爲什麼沒有檢測

Answer 1

嘗試改變，以防止添加默認操作，並把變化的函數體元素

$(document).ready(function() { 
    $("body").on("change", "[id^='AnsTopic']", function(e) { 
     e.preventDefault(); 
var x = $(this).attr('id').substring(8); 

     $('#AnsSubTopic'+x).html(''); 
     switch($(this).val()) { 
      case 'All': 
       $('#AnsSubTopic'+x).append('<option value="All">All</option>'); 
      break; 
      case 'Kinematics': 
       $('#AnsSubTopic'+x).append('<option value="All">All</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Vectors">Vectors</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Motion">Motion</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Projectile">Projectile</option>'); 
      break; 
      case 'Mechanics': 
       $('#AnsSubTopic'+x).append('<option value="All">All</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Newton Law">Newton Law</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Friction">Friction</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Circular Motion">Circular Motion</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Work-Energy">Work-Energy</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Momentum-Collision">Momentum-Collision</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Rotational Dynamics">Rotational Dynamics</option>'); 
       $('#AnsSubTopic'+x).append('<option value="Gravitation">Gravitation</option>'); 
      break; 
     } 
    }); 
});