そのコードは構文的に正しいです。ほとんどの場合、間違った時間に実行しています。

DOMの準備ができたら、イベントをバインドします。

ネイティブ JS/DOM

window.addEventListener('DOMContentLoaded', () => {
    const yearDropDown = document.getElementById('yearDropdown');
    yearDropDown.addEventListener('change', () => { 
        alert(yearDropDown.value)
    });
});

jQuery

$(function(){ /* DOM ready */
    $("#yearDropdown").change(function() {
        alert('The option with value ' + $(this).val());
    });
});

または、次を使用しますlive。

$("#yearDropdown").live('change', function() {
    alert('The option with value ' + $(this).val());
});

または、次を使用しますdelegate。

$(document.body).delegate('#yearDropdown', 'change', function() {
    alert('The option with value ' + $(this).val());
});

または、jQuery を使用している場合1.7+:

$("#yearDropdown").on('change', function() {
    alert('The option with value ' + $(this).val());
});

それにもかかわらず、ブラウザがマークアップのレンダリングを終了したら、スクリプトを実行するのが通常は最善です。

jsFiffleであなたのコードを試しました。オプションとして数年を手動で追加しました。それは正しく機能します。

$（document）.readyの.changeイベントをバインドするだけです。

$(document).ready(function(){
  $("#yearDropdown").change(function () {
      alert('The option with value ' + $(this).val());
  });​
});

あなたのコードは正しく、私のために働いています。ここを参照してください: http://jsfiddle.net/mobweb/2Skp9/

jQuery が正しく読み込まれていることを確認しますか?

これが役立つかどうかはわかりませんが、これを試すことができます：

    $("#yearDropdown").live("change", function () {
    alert('The option with value ' + $(this).val());
});