jquery实现下拉列框(Html.DropDownList)无刷新联动

资料来源：网络整理时间：2023/2/14 0:12:17 共计：3639 浏览

html:

    <%=Html.DropDownList("num",Model) %>
    <%=Html.DropDownList("items",new List<SelectListItem>{
      (new SelectListItem(){Text="--请选择--",Value="0",Selected=true})}) %>

其中，Model为模型，是从Controller类中传到html页面的值，其数据类型是：IList<SelectListItem>

{

IList<Speciality> list = sp.FindSpecialities(); //获得要绑定到下拉列表框的值

            IList<SelectListItem> selectItem = new List<SelectListItem>();
            selectItem.Add(new SelectListItem { Text = "--请选择--", Value = 0 + "", Selected = true });//添加第一个下拉列表框的值
            foreach (Speciality speciality in list)
            {//循环添加下拉列表框的值
                SelectListItem s = new SelectListItem { Text = speciality.SpcialityName, Value = speciality.ID + "", Selected = false };
                selectItem.Add(s);
            }

return View(selectItem);

}

jquery:

          $("#num").change(function() {
                $.getJSON("../Test/GetSubject", { speID: $("#num").val() }, function(data) {
                    $("#items").empty();
                    $.each(data, function(i, item) {
                    $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#items"));

});
});

});

});
</script>

其中，引入了jquery 的jquery-1.3.2.js包，在第一个下拉列表框的值改变的时候(change)使用Ajax请求调用Controller类中的GetSubject方法，并对返回值进行处理。清空empty原先的值，然后循环添加返回的值到下拉列表框中。

Controller:

public JsonResult GetSubject(string speID)
        {
            int id = Convert.ToInt32(speID);
            IList<Subject> subjects = sb.FindSubjectByState(id, 0);

            List<SelectListItem> items = new List<SelectListItem>();
            foreach (Subject item in subjects)
                items.Add(new SelectListItem { Text = item.SubjectName, Value = item.ID+"" });
            return Json(items);
        }

返回值类型为JsonResult，根据条件获得值后添加到List<SelectListItem>集合中，并返回该值。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：替换SQL字段中的换行符，回车符 | ·下一条：在ASP.NET MVC中使用DropDownList