基于Bootstrap实现城市三级联动

前端之家收集整理的这篇文章主要介绍了基于Bootstrap实现城市三级联动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了Bootstrap实现城市三级联动的具体代码,供大家参考,具体内容如下

HTML代码部分

==请选择===
==请选择===
==请选择===

JS 代码部分

//默认绑定省
ProviceBind();
//绑定事件
$("#Province").change( function () {
CityBind();
})

$("#City").change(function () {
VillageBind();
})

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

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

var str = "";
$.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 + "";
})
//将数据添加到省份这个下拉框里面
$("#Province").append(str);
},error: function () { alert("Error"); }
});

}
function CityBind() {

var provice = $("#Province").attr("value");
//判断省份这个下拉框选中的值是否为空
if (provice == "") {
return;
}
$("#City").html("");
var str = "";

$.ajax({
type: "POST",data: { "parentiD": provice,"MyColums": "City" },item) {
str += "<option value=" + item.Id + ">" + item.MyTexts + "";
})
//将数据添加到省份这个下拉框里面
$("#City").append(str);
},error: function () { alert("Error"); }
});

}
function VillageBind() {

var provice = $("#City").attr("value");
//判断市这个下拉框选中的值是否为空
if (provice == "") {
return;
}
$("#Village").html("");
var str = "";
//将市的ID拿到数据库进行查询查询出他的下级进行绑定
$.ajax({
type: "POST","MyColums": "Village" },item) {
str += "<option value=" + item.Id + ">" + item.MyTexts + "";
})
//将数据添加到省份这个下拉框里面
$("#Village").append(str);
},error: function () { alert("Error"); }
});
//$.post("/Home/GetAddress",{ parentiD: provice,MyColums: "Village" },function (data) {
// $.each(data.Data,item) {
// str += "<option value=" + item.Id + ">" + item.MyTexts + "";
// })
// $("#Village").append(str);
//})
}

控制器+数据库 代码部分

(); Result result = new Result(); result.Data = sysfileBll.GetSysFieldParentId(parentiD,MyColums); return Json(result,JsonRequestBehavior.AllowGet); }

代码

sql;"> 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查询代码

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

最重要的也就是数据

这是省市县的表格数据,直接导入到数据库过后就能使用

这是下载地址:

最终的效果图:

最重要的也就是数据。

如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:/bootstrap/35067.html

猜你在找的Bootstrap相关文章