基于Bootstrap實現(xiàn)城市三級聯(lián)動
更新時間：2017年11月23日 09:15:23 作者：易醉的騷年丶
這篇文章主要為大家詳細(xì)介紹了基于BootStrap實現(xiàn)城市三級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Bootstrap實現(xiàn)城市三級聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下
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 () {
//默認(rèn)綁定省
ProviceBind();
//綁定事件
$("#Province").change( function () {
CityBind();
})
$("#City").change(function () {
VillageBind();
})
})
function Bind(str) {
alert($("#Province").html());
$("#Province").val(str);
}
function ProviceBind() {
//清空下拉數(shù)據(jù)
$("#Province").html("");
var str = "<option>==請選擇===</option>";
$.ajax({
type: "POST",
url: "/Home/GetAddress",
data: { "parentiD": "", "MyColums": "Province" },
dataType: "JSON",
async: false,
success: function (data) {
//從服務(wù)器獲取數(shù)據(jù)進(jìn)行綁定
$.each(data.Data, function (i, item) {
str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
})
//將數(shù)據(jù)添加到省份這個下拉框里面
$("#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) {
//從服務(wù)器獲取數(shù)據(jù)進(jìn)行綁定
$.each(data.Data, function (i, item) {
str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
})
//將數(shù)據(jù)添加到省份這個下拉框里面
$("#City").append(str);
},
error: function () { alert("Error"); }
});
}
function VillageBind() {
var provice = $("#City").attr("value");
//判斷市這個下拉框選中的值是否為空
if (provice == "") {
return;
}
$("#Village").html("");
var str = "<option>==請選擇===</option>";
//將市的ID拿到數(shù)據(jù)庫進(jìn)行查詢，查詢出他的下級進(jìn)行綁定
$.ajax({
type: "POST",
url: "/Home/GetAddress",
data: { "parentiD": provice, "MyColums": "Village" },
dataType: "JSON",
async: false,
success: function (data) {
//從服務(wù)器獲取數(shù)據(jù)進(jìn)行綁定
$.each(data.Data, function (i, item) {
str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
})
//將數(shù)據(jù)添加到省份這個下拉框里面
$("#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);
//})
}
控制器+數(shù)據(jù)庫 代碼部分
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 ";
最重要的也就是數(shù)據(jù)
這是省市縣的表格數(shù)據(jù)，直接導(dǎo)入到數(shù)據(jù)庫過后就能使用
這是下載地址：三級聯(lián)動
最終的效果圖：
最重要的也就是數(shù)據(jù)。
如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
解讀new?Object()和Object.create()的區(qū)別
這篇文章主要介紹了解讀new?Object()和Object.create()的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計算器案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
在使用Element Plus官方API時,表格默認(rèn)排序可能會遇到問題,一個列表可能被多次排序影響數(shù)據(jù)展示,解決方法是修改useSortTable.js文件,這樣可以確保表格按預(yù)期正確排序,更多詳情可查閱相關(guān)的技術(shù)文檔或資源2024-10-10
閉包是js的一個難點也是它的一個特色,是我們必須掌握的js高級特性,下面這篇文章主要給大家介紹了關(guān)于JavaScript閉包函數(shù)的相關(guān)資料,需要的朋友可以參考下2022-11-11
基于Marquee.js插件實現(xiàn)的跑馬燈效果示例
這篇文章主要介紹了基于Marquee.js插件實現(xiàn)的跑馬燈效果,結(jié)合實例形式給出了Marquee.js插件的定義及具體使用方法,需要的朋友可以參考下2017-01-01
關(guān)于Javascript中值得學(xué)習(xí)的特性總結(jié)
本文主要介紹了一些Javascript中值得學(xué)習(xí)的特性，可選鏈操作符，空值合并運算符，Promise.allSettled()，BigInt類型等特性，文中有詳細(xì)的代碼示例介紹這些特性，感興趣的可以參考下2023-05-05
基于JavaScript實現(xiàn)TAB標(biāo)簽效果
js實現(xiàn)tab標(biāo)簽效果，在項目中經(jīng)常用到，今天抽點時間把我寫的js實現(xiàn)tab標(biāo)簽效果源碼分享給大家，對js tab標(biāo)簽代碼需要的朋友參考下2016-01-01
這篇文章主要介紹了js實現(xiàn)仿微博滾動顯示信息的效果,通過由上往下滾動來實現(xiàn)不斷顯示微博的，而且每一天新微博都是通過淡入效果顯示的,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JavaScript實現(xiàn)按鍵精靈的原理分析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了js操作cookie保存瀏覽記錄的方法,涉及JavaScript使用cookie記錄并保存用戶瀏覽網(wǎng)頁信息的實現(xiàn)技巧,需要的朋友可以參考下2015-12-12