[轉]基於BootStrap 的城市三級聯動

原文地址:https://blog.csdn.net/peiyuanxin/article/details/51992384

HTML代碼部分

 

               <div class="form-group"> 
           
                 <div class="col-sm-2 text-center"> 
           
                    省 
           
                 </div> 
           
                 <div class="col-sm-2"> 
           
                     <select class="form-control" name="Province" id="Province"> 
           
                         <option>==請選擇===</option> 
           
                     </select> 
           
 
           
 
           
                 </div> 
           
                 <div class="col-sm-1 text-center"> 
           
                    市 
           
                 </div> 
           
                 <div class="col-sm-2"> 
           
                     <select class="form-control" name="City" id="City"> 
           
                         <option>==請選擇===</option> 
           
                     </select> 
           
                 </div> 
           
                 <div class="col-sm-1 text-center"> 
           
                 縣/區 
           
                 </div> 
           
                 <div class="col-sm-2"> 
           
                     <select class="form-control" name="Village" id="Village"> 
           
                         <option>==請選擇===</option> 
           
                     </select> 
           
                 </div> 
           
             </div> 
          

 

JS 代碼部分

 

              
           $(function () {


    //默認綁定省
    ProviceBind();
    //綁定事件
    $("#Province").change( function () {
        CityBind();
    })
    
    $("#City").change(function () {
        VillageBind();
    })
   
   


})
function Bind(str) {
    alert($("#Province").html());
    $("#Province").val(str);


}
function ProviceBind() {
    //清空下拉數據
    $("#Province").html("");




    var str = "<option>==請選擇===</option>";
    $.ajax({
        type: "POST",
        url: "/Home/GetAddress",
        data: { "parentiD": "", "MyColums": "Province" },
        dataType: "JSON",
        async: false,
        success: function (data) {
            //從服務器獲取數據進行綁定
            $.each(data.Data, function (i, item) {
                str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
            })
            //將數據添加到省份這個下拉框里面
            $("#Province").append(str);
        },
        error: function () { alert("Error"); }
    });


   
        
}
function CityBind() {


    var provice = $("#Province").attr("value");
    //判斷省份這個下拉框選中的值是否為空
    if (provice == "") {
        return;
    }
    $("#City").html("");
    var str = "<option>==請選擇===</option>";


    $.ajax({
        type: "POST",
        url: "/Home/GetAddress",
        data: { "parentiD": provice, "MyColums": "City" },
        dataType: "JSON",
        async: false,
        success: function (data) {
            //從服務器獲取數據進行綁定
            $.each(data.Data, function (i, item) {
                str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
            })
            //將數據添加到省份這個下拉框里面
            $("#City").append(str);
        },
        error: function () { alert("Error"); }
    });


}
function VillageBind() {


    var provice = $("#City").attr("value");
    //判斷市這個下拉框選中的值是否為空
    if (provice == "") {
        return;
    }
    $("#Village").html("");
    var str = "<option>==請選擇===</option>";
    //將市的ID拿到數據庫進行查詢，查詢出他的下級進行綁定
    $.ajax({
        type: "POST",
        url: "/Home/GetAddress",
        data: { "parentiD": provice, "MyColums": "Village" },
        dataType: "JSON",
        async: false,
        success: function (data) {
            //從服務器獲取數據進行綁定
            $.each(data.Data, function (i, item) {
                str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
            })
            //將數據添加到省份這個下拉框里面
            $("#Village").append(str);
        },
        error: function () { alert("Error"); }
    });
    //$.post("/Home/GetAddress", { parentiD: provice, MyColums: "Village" }, function (data) {  
    //    $.each(data.Data, function (i, item) {
    //        str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
    //    })
    //    $("#Village").append(str);
    //})
}  
          

 

  控制器+數據庫 代碼部分

 

 

 
           
    public ActionResult GetAddress(string parentiD, string MyColums) 
           
         { 
           
             ISysFieldBll sysfileBll = BLLFactory.DataAccess.GetBll<ISysFieldBll>(); 
           
             Result result = new Result(); 
           
             result.Data = sysfileBll.GetSysFieldParentId(parentiD,MyColums); 
           
             return Json(result,JsonRequestBehavior.AllowGet); 
           
         } 
          

 

表代碼  

            CREATE TABLE [dbo].[SysField]( 
           
[Id] [nvarchar](36) NOT NULL, 
           
[MyTexts] [nvarchar](200) NOT NULL, 
           
[ParentId] [nvarchar](36) NULL, 
           
[MyTables] [nvarchar](200) NULL, 
           
[MyColums] [nvarchar](200) NULL, 
           
[Sort] [int] NULL, 
           
[Remark] [nvarchar](4000) NULL, 
           
[CreateTime] [datetime] NULL, 
           
[CreatePerson] [nvarchar](200) NULL, 
           
[UpdateTime] [datetime] NULL, 
           
[UpdatePerson] [nvarchar](200) NULL, 
           
) 
          

SQL查詢代碼  

                        string sql = @"SELECT * FROM SysField WHERE 1=1 and MyTables='SysPerson' 
           and MyColums=@MyColums and ParentId=@ParentId  ";
             
     

 
           
               
            
               最重要的也就是數據 
          

             這是省市縣的表格數據，直接導入到數據庫過后就能使用        
           
        這是下載地址 
           
               
            
              
 http://download.csdn.net/detail/peiyuanxin/9583112
 
          

最終的效果圖