1

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

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

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

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

1 回答 1

1

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

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

于 2013-08-06T11:58:48.640 回答