您的位置：首页 > Web前端 > BootStrap

基于Bootstrap实现城市三级联动

2017-11-23 09:15 916 查看

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

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

最重要的也就是数据

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

这是下载地址：三级联动

最终的效果图：

最重要的也就是数据。

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

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Bootstrap 三级联动

相关文章推荐

新的分享

章节导航