Html.DropDownListFor() 二級聯動 （$.getJSON）

 

Control：

 public ActionResult GetPositionName(int parentid)    //發布新職位頁面中的根據職位類別，獲取職位名稱
        {
            List<Category> categorylist2 = categorymanage.GetCategotyByParentId(parentid);
            return Json(categorylist2.ToList(), JsonRequestBehavior.AllowGet);
        }

　　

view：

 <%=Html.DropDownListFor(Model=>Model.CATEGORY,(SelectList)ViewBag.Category1 ,"--------請選擇--------" ,new { @Style="font-size:18px"}) %>
                         
 <%=Html.DropDownListFor(Model => Model.POSITION_NAME, (SelectList)ViewBag.Category2 ,"--------請選擇--------" , new { @Style="font-size:18px"})%>

 

jQuery：

<script type="text/javascript">  
        $(document).ready(function () {                //根據選擇的職位類別，動態獲取下屬職位名稱
            $("#CATEGORY").change(function () {
                var url = "/Position/GetPositionName/?parentid=" + $("#CATEGORY").val(); //規則是控制器/方法/參數
                //alert(url);
                $.getJSON(url, function (data) {
                    $('#POSITION_NAME').html('');
                    //alert('hello');
                    $("#POSITION_NAME").append("<option value=''>--------請選擇--------</option>")
                    $.each(data, function (i, item) {
                        $('#POSITION_NAME').append("<option value='"+item.NAME+"'>"+item.NAME+"</option>");
                    });
                });
              
               
            });
        });
    </script>

實現效果：