bootstrap sql 城市选择_基于Bootstrap实现城市三级联动

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

HTML代码部分

省

==请选择===

市

==请选择===

县/区

==请选择===

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 = "==请选择===";

$.ajax({

type: "POST",

url: "/Home/GetAddress",

data: { "parentiD": "", "MyColums": "Province" },

dataType: "JSON",

async: false,

success: function (data) {

//从服务器获取数据进行绑定

$.each(data.Data, function (i, item) {

str += "" + 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",

url: "/Home/GetAddress",

data: { "parentiD": provice, "MyColums": "City" },

dataType: "JSON",

async: false,

success: function (data) {

//从服务器获取数据进行绑定

$.each(data.Data, function (i, item) {

str += "" + 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",

url: "/Home/GetAddress",

data: { "parentiD": provice, "MyColums": "Village" },

dataType: "JSON",

async: false,

success: function (data) {

//从服务器获取数据进行绑定

$.each(data.Data, function (i, item) {

str += "" + item.MyTexts + "";

})

//将数据添加到省份这个下拉框里面

$("#Village").append(str);

},

error: function () { alert("Error"); }

});

//$.post("/Home/GetAddress", { parentiD: provice, MyColums: "Village" }, function (data) {

// $.each(data.Data, function (i, item) {

// str += "" + item.MyTexts + "";

// })

// $("#Village").append(str);

//})

}

控制器+数据库 代码部分

public ActionResult GetAddress(string parentiD, string MyColums)

{

ISysFieldBll sysfileBll = BLLFactory.DataAccess.GetBll();

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 ";

最重要的也就是数据

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

这是下载地址：三级联动

最终的效果图：

最重要的也就是数据。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

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