を使用して動作します

<div class="DropDownContainer">
    <select class="DropDown">
        <option id="lblPeriod">Period</option>
        <option id="lblLike">Like</option>
        <option id="lblYear">Year</option>
    </select>
</div>

と

$('.DropDown').on('change', function () {
  var id = $(this).children(":selected").attr("id");
  alert(id);
});

オプション要素に ID を設定します。また、value送信可能なフォームとして機能させるには、tne オプションで属性を設定する必要があります。

フィドルを参照してください：http://jsfiddle.net/YdXpv/1/

オプション要素は、その中にスパンを含めることはできません:

html を次のように変更します。

<select class="DropDown">
    <option id="period">Period</option>
    <option id="like">Like</option>
    <option id="year">Year </option>
</select>


$('.DropDown').on('change', function () {
   var id = $(this).children(":selected").attr("id");
   alert(id);
});

Asp.net で多言語が問題になる場合は、次のようなオプション要素のリソース キーも使用できます。

<asp:DropDownList id="MyDdl" runat="server">
   <asp:ListItem Value="period" Text="period" meta:resourcekey ="period_Item_MyDdl" />
   <asp:ListItem Value="like" Text="like" meta:resourcekey ="like_Item_MyDdl" />
   <asp:ListItem Value="year" Text="year" meta:resourcekey ="year_Item_MyDdl" />
</asp:DropDownList> 

以下のコードを使用します。

 $('.DropDown').on('change', function () {

      var id = $(this).children(":selected").text().find("span").prop("id");
      alert(id);
 });

使用find()してprop()

 var id = $(this).children(":selected").find('span').prop("id");