title: Calling external JS function from cascading SELECT element change event
body: <p>I am a jQuery noob here and I am trying to figure out how to move this script to an external .js file.  I already tried copying it and referencing on the page but it doesn't seem to work.</p>
  
  <p>What am I missing here?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $('#YearD').change(function () {
          var selectedYear = $(this).val();
          if (selectedYear != null &amp;&amp; selectedYear != '') {
              $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) {
                  var monthsSelect = $('#Month');
                  monthsSelect.empty();
                  $.each(months, function (index, month) {
                      monthsSelect.append($('&lt;option/&gt;', {
                          value: month.value,
                          text: month.text
                      }));
                  });
              });
          }
      });
  });
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $('#Month').change(function () {
      var selectedMonth = $(this).val();
      if (selectedMonth != null &amp;&amp; selectedMonth != '') {
          $.getJSON('@Url.Action("Days")', { month: selectedMonth }, function (days) {
              var daysSelect = $('#Day');
              daysSelect.empty();
              if (days == 0) {
                  daysSelect.css("visibility", "hidden");
              }
              else {
                  daysSelect.css("visibility", "visible");
              }
              $.each(days, function (index, day) {
                  daysSelect.append($('&lt;option/&gt;', {
                      value: day.value,
                      text: day.text
                  }));
              });
          });
      }
  });
  &lt;/script&gt;
  </code></pre>