使用HTML5和存儲庫模式的級聯下拉列表

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

在我的控制器我有以下，我認爲這將更新適當的值的視圖模型來然後填充二級下拉列表，但正在顯示什麼。

[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