• JQ与AJAX 省市区三级联动下拉框


    用于初学者学习基本的联动下拉框,废话不多说,见代码

    首先看控制器里的3个下拉框对应代码:

     1         public ActionResult GetProvinceList()
     2         {
     3             ProvinceRepository rep = new ProvinceRepository();
     4             var selectlist = new SelectList(rep.GetProvinceList(), "ProvinceID", "ProvinceName");
     5             return Json(selectlist);
     6         }
     7 
     8         public ActionResult GetCityList(string text)
     9         {
    10             CityRepository rep = new CityRepository();
    11             var selectlist = new SelectList(rep.GetCityList(text), "CityID", "CityName");
    12             return Json(selectlist);
    13         }
    14 
    15         public ActionResult GetAreaList(string text)
    16         {
    17             DistrictRepository rep = new DistrictRepository();
    18             var selectlist = new SelectList(rep.GetAreaList(text), "AreaID", "AreaName");
    19             return Json(selectlist);
    20         }

    接着,控制器非别去定义的Repository里面向数据库读取数据,并返回

    1         LinkageDataContext db = new LinkageDataContext();
    2 
    3         public IQueryable GetProvinceList()
    4         {            
    5             var name = from m in db.province select m;
    6             return name;
    7         }
    1         LinkageDataContext db = new LinkageDataContext();
    2 
    3         public IQueryable GetCityList(string text)
    4         {
    5             var res = from m in db.city.Where(e => e.father == text) select m;
    6             return res;
    7         }
    1         LinkageDataContext db = new LinkageDataContext();
    2 
    3         public IQueryable GetAreaList(string text)
    4         {
    5             var res = from m in db.area.Where(e => e.father == text) select m;
    6             return res;
    7         }

    其实以上三个Repository可以合成一个,不过本人为了后续个别设计就分开了,读者可自行设计。接下来就是View里面的代码,View里面分为两块,一块就是下拉框的Html,另一块就是JS代码实现数据联动。本人是用的Telerik形式。

     1  <h>省:</h>
     2      <title>菜单联动</title>
     3      <%= Html.Telerik().DropDownList()
     4                          .Name("EmpProvince")
     5                          .DataBinding(databingding => databingding.Ajax()
     6                          .Select("GetProvinceList", "Home"))
     7      %>
     8 
     9  <h>市:</h>
    10     <%= Html.Telerik().DropDownList()
    11                          .Name("EmpCity")
    12 
    13     %>
    14 
    15      <h>区:</h>
    16     <%= Html.Telerik().DropDownList()
    17                          .Name("EmpArea")
    18 
    19     %>

    接下来是JS的代码了。

     1   $(function () {
     2         $('#EmpProvince').bind('valueChange', onEmpProvinceChangeCity);
     3         $('#EmpCity').bind('valueChange', onEmpProvinceChangeCity2);
     4 
     5     })
     6     function onEmpProvinceChangeCity() {
     7         var dropDownList = $('#EmpCity').data('tDropDownList');
     8         var dropDownList3 = $('#EmpArea').data('tDropDownList');
     9         dropDownList3.dataBind(null);
    10         var text = $("#EmpProvince").data("tDropDownList").value();
    11         getLinkageDatas(dropDownList,
    12                 text,
    13                 "DropDownListPrvUCity",
    14                 "获取城市联动数据失败!");
    15     }
    16 
    17 
    18 
    19     function onEmpProvinceChangeCity2() {
    20         var dropDownList = $('#EmpArea').data('tDropDownList');
    21         var text = $("#EmpCity").data("tDropDownList").value();
    22         getLinkageDatas2(dropDownList,
    23                 text,
    24                 "DropDownListPrvUCity",
    25                 "获取城市联动数据失败!");
    26     }
    27 
    28     function getLinkageDatas(dropDownList, text, action, message) {
    29         if (text == "") {
    30             dropDownList.dataBind(null);
    31 
    32             return;
    33         }
    34        
    35         $.ajax({
    36             type: "Post",
    37             url: '<%= @Url.Action("GetCityList","Home") %>',
    38             data: { text: text },
    39             dataType: "json",
    40             success: function (data) {
    41                 dropDownList.dataBind(data);
    42             },
    43             error: function () {
    44             }
    45         });
    46     }
    47 
    48     function getLinkageDatas2(dropDownList, text, action, message) {
    49         if (text == "") {
    50             dropDownList.dataBind(null);
    51             return;
    52         }
    53         
    54         $.ajax({
    55             type: "Post",
    56             url: '<%= @Url.Action("GetAreaList","Home") %>',
    57             data: { text: text },
    58             dataType: "json",
    59             success: function (data) {
    60                 dropDownList.dataBind(data);
    61             },
    62             error: function () {
    63             }
    64         });
    65     }

    需要注意的是,代码的第八第九行是处理清空的情况,就是当重选一级下拉框时,对2级和3级显示的数据清空。

    至于Model的话,读者可自行编写了。希望能够帮助到大家。本人也刚学不久,有不足的望指点。

  • 相关阅读:
    Java之static作用的深度总结
    关于UiAutomator无法识别的元素
    pom.xml详解
    maven的依赖范围scope
    maven-surefire-plugin插件
    remote origin already exists解决办法
    resin启动报错:guava-15.0.jar!/META-INF/beans.xml:5: <beans xmlns="http://xmlns.jcp.org/xml/ns/javaee"> is an unexpected top-level tag. 异常
    Mysql存储过程
    ical4j 实现ICS文件的生成和解析
    设计模式之观察者模式
  • 原文地址:https://www.cnblogs.com/yjnet/p/Linkage.html
Copyright © 2020-2023  润新知