title: Detect Change in Dropdown using Jquery
body: <p>I have two dropdowns created in Jquery. The options in the first dropdown are populated in a function when a certain event occurs.</p>
  
  <p>Then based on the selection in the first dropdown, the second dropdown should be populated using a second function, which basically detects a change in the first dropdown. However, the second function doesnot detect any change and I cannot find out why. I am providing both the functions -</p>
  
  <p>Here is the first function -</p>
  
  <pre><code>$(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('&lt;option value="All"&gt;All&lt;/option');
          $('#AnsTopic'+x).append('&lt;option value="Kinematics"&gt;Kinematics&lt;/option&gt;');
          $('#AnsTopic'+x).append('&lt;option value="Mechanics"&gt;Mechanics&lt;/option&gt;');
          $('#AnsSubTopic'+x).append('&lt;option value="All"&gt;All&lt;/option');
          $('#AnsTopic'+x).show();
          $('#AnsSubTopic'+x).show();
      }
  });
  </code></pre>
  
  <p>And here is the second function -</p>
  
  <pre><code>$( 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('&lt;option value="All"&gt;All&lt;/option&gt;');
              break;
              case 'Kinematics':
                  $('#AnsSubTopic'+x).append('&lt;option value="All"&gt;All&lt;/option&gt;');
                  $('#AnsSubTopic'+x).append('&lt;option value="Vectors"&gt;Vectors&lt;/option&gt;');
                  $('#AnsSubTopic'+x).append('&lt;option value="Motion"&gt;Motion&lt;/option&gt;');
                  $('#AnsSubTopic'+x).append('&lt;option value="Projectile"&gt;Projectile&lt;/option&gt;');
              break;
              case 'Mechanics':
                  $('#AnsSubTopic'+x).append('&lt;option value="All"&gt;All&lt;/option&gt;');
                  $('#AnsSubTopic'+x).append('&lt;option value="Newton Law"&gt;Newton Law&lt;/option&gt;');
                  $('#AnsSubTopic'+x).append('&lt;option value="Friction"&gt;Friction&lt;/option&gt;');
                  $('#AnsSubTopic'+x).append('&lt;option value="Circular Motion"&gt;Circular Motion&lt;/option&gt;');
                  $('#AnsSubTopic'+x).append('&lt;option value="Work-Energy"&gt;Work-Energy&lt;/option&gt;');
                  $('#AnsSubTopic'+x).append('&lt;option value="Momentum-Collision"&gt;Momentum-Collision&lt;/option&gt;');
                  $('#AnsSubTopic'+x).append('&lt;option value="Rotational Dynamics"&gt;Rotational Dynamics&lt;/option&gt;');
                  $('#AnsSubTopic'+x).append('&lt;option value="Gravitation"&gt;Gravitation&lt;/option&gt;');
              break;
          }
      });
  });
  </code></pre>
  
  <p>Just to clarify AnsTopic is the first list and AnsSubTopic is the second list. Any suggestion why the change is not being detected</p>