如何在下拉列表中获取所选选项的值？

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));
                });
            }
        });

我怎样才能做到这一点？

Answer 1

您可以使用 jQuery 附加到 DropDownList 的 Change 事件。

$("#YourDropDownID").change(function () {
     var itemSel = $("#YourDropDownID").val();
     // Do your Ajax logic using the selected value stored in variable 'itemSel'

});

编辑：

测试这个功能：

$("#course").change(function () {
        var Hobbyid = $("#Hobby").val();
        var Cid=$("#course").val();
        alert("This is the CourseID:" + Cid);  
        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));
                });
            }
        });
});

我将“data”属性更改为字符串连接，因为使用“id”名称时出现了一些问题。添加了一个显示所选课程 ID 的警报，并将选择器更改为使用小写 ID。请用我的完全替换您的 javascript 函数，然后让我们现在。