基于Bootstrap實現城市三級聯動
更新時間：2017年11月23日 09:15:23 作者：易醉的騷年丶
這篇文章主要為大家詳細介紹了基于BootStrap實現城市三級聯動，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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"> 縣/區(qū) </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實戰(zhàn)教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了Bootstrap導航條的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
在瀏覽器事件中，會觸發(fā)一些默認動作，比如：點擊一個鏈接時，執(zhí)行完捕獲／冒泡動作后，會觸發(fā)鏈接的默認事件：跳轉到指定鏈接地址。2009-09-09
本篇文章主要介紹了JS異步加載的三種實現方式，有些時候我們需要JS異步加載，這里整理了詳細的代碼,有需要的小伙伴可以參考下。2017-03-03
這篇文章主要介紹了自己實現ajax封裝示例,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細介紹了巧用數組制作圖片切換js實現代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
本篇文章給大家分享了JavaScript滿天星導航欄實現方法，以前也介紹過很多關于特效導航的制作方法，對此有興趣的朋友參考學習下。2018-03-03
這篇文章主要介紹了swtich／if...else的替代語句的相關資料,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了微信小程序實現tab左右切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
window onload加載多個同時使用，想必有很多人沒有用過吧，接下來為大家詳細介紹下具體的使用方法，感興趣的朋友可以參考下2013-04-04
JS實現模擬百度搜索“2012世界末日”網頁地震撕裂效果代碼
這篇文章主要介紹了JS實現模擬百度搜索“2012世界末日”網頁地震撕裂效果代碼,引入第三方插件實現頁面的抖動、撕裂及圖片等效果,需要的朋友可以參考下2015-10-10