jquery - ドロップダウンで選択したオプションの値を取得するにはどうすればよいですか？

Question

ビューにドロップダウンがあります。ドロップダウンには、列挙値が表示されます。

      @Html.DropDownListFor(model => model.hobbyhome.HobbyDetailList.First().course, HobbyHomesWebApp.Utility.EnumList.ToSelectList(HobbyHomes.Model.Course.Advance, "Select Course"), "--Select Course--", new { @id="Course"}) <font color="red">*</font>   

コースのジェネレータ

  <div class="editor-field">
 <select id="course" name="course"><option value="">--Select Course--              </option>
     <option value="Basic">Basic Level</option>
      <option value="Intermidiate">Intermidiate Level</option>
       <option value="Advance">Advance Level</option>
      </select> <font color="red">*</font>   
              </div>

   var course = from Course c in Enum.GetValues(typeof(Course))
                         select new { ID = c, Name = c.ToString() };
                        ViewData["course"] = new SelectList(course, "ID", "Name");

関与する入力オプションは、基本、中級、および上級です

選択した値に基づいて他のドロップダウンにデータを入力しようとしています。

    $("#Course").change(function () {
        var Hobbyid = $("#Hobby").val();
        var Cid=$("#Course").val();
        var urlHobbyhome = '@Url.Action("FetchStateByHobbyId")';
        $.ajax({
            type: "POST",
            url: urlHobbyhome,
            data: { id: Hobbyid,cid:Cid },
            success: function (data) {
                $('#State').empty();
                $('#State')
                        .append($('<option>', { value: "0" })
                        .text("-- Select State --"));
                $.each(data, function (key, value) {

                    $('#State')
                        .append($('<option>', { value: value.Value })
                        .text(value.Text));
                });
            }
        });

どうすればこれを達成できますか？