Question

我的代码中有以下下拉列表，这些列表是从后端存储库填充的。

<h3>Upload Course Section Content</h3>
  <div class="row">
    <div class="nine columns">
      <label for="name">Select Course:</label>
      <select id="coursedd" name="courseid" style="height:40px; font-size:18px;">
      <option value="0" id ="defaultcid" class ="choosefilter" >----Please Select Course----</option>
      @foreach (var course in Model.GetCourseList())
      {
        <option value="@course.CourseID" id ="courseid" class ="choosefilter" >@course.Name </option>
      }
      </select>
    </div>
  </div>
  <div class="row" style="margin-top:30px;">
    <div class="nine columns">
      <label for="name" id="namelabel">Select Course Section:</label>
      <select id="coursesectiondd" name="coursesectionid" style="height:40px; font-size:18px;">
      <option value="0" id ="defaultcs" class ="choosefilter" >----Please Select Course Section----</option>
      @foreach (var courseSection in Model.GetCourseSectionsByCourseID(Model.CourseID))
      {
        <option value="@courseSection.CourseSectionID" id ="coursesectionid" class ="choosefilter" >@courseSection.Title </option>
      }
      </select>
    </div>
  </div>

第二个下拉列表最初是隐藏的，在选择第一个下拉列表时，我希望填充二级下拉列表。我尝试使用以下jquery和javascript，但一直无法这样做。任何人都可以帮我解决这个问题：

 function GetCourseID() {

    var id = document.getElementById("coursedd").value;

    var postData = {
        'CourseID': id
    };

    $.post('/Admin/GetCourseID/', postData, function (data) {
        document.getElementById("coursedd").selectedIndex = id;
        document.getElementByID("coursesectiondd").show();
    });
};

$(function () {
    $("#coursedd").change(function () {
        $('#namelabel').show();
        $('#title').show();
        $('#CourseSectionSubmit').show();
        var chosen = document.getElementById("coursedd").value;
        if (chosen == "0") {
            $('#namelabel').hide();
            $('#coursesectiondd').hide();
            $('#file').hide();
            $('#filelabel').hide();
        }
        else {
            $('#coursesectiondd').show()
            GetCourseID()
            $('#coursesectiondd').a
        }
    });
});

在我的控制器中，我有以下内容，我认为这会使用适当的值更新viewmodel，然后填充辅助下拉列表，但不会显示任何内容。

[HttpPost]
    public ActionResult GetCourseID(int courseID)
    {
        avm.CourseID = courseID;
        return View(avm);
    }

Answer 1

对于初学者来说，$('#coursesectiondd').a似乎是一个非常破碎的javascript代码。同样来自您的控制器操作，您将返回一些视图，但在您的AJAX成功回调中，您没有对结果进行任何操作，例如更新DOM中的第二个下拉列表。在控制器操作中将结果作为JSON返回更有效，然后在成功回调中使用此JSON绑定第二个下拉列表。

我在这里写了一个关于如何实现这一目标的示例：https://stackoverflow.com/a/4459084/29407

使用HTML5和存储库模式的级联下拉列表

1 个答案: