bootstrap php三级联动,基于Bootstrap实现城市三级联动
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下
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 php三级联动,基于Bootstrap实现城市三级联动相关推荐
- 基于layui 2.*省市级三级联动
不bb,直接上代码,复制后替换layui.css和layui.js可直接使用 <!DOCTYPE html> <html> <head><meta chars ...
- C#开发微信门户及应用(46)-基于Bootstrap的微信门户应用管理系统功能介绍
在前面介绍很多的微信框架,基本上都采用EasyUI的界面来搭建的微信框架,如随笔<C#开发微信门户及应用(8)-微信门户应用管理系统功能介绍>介绍的一样,不过随着微信的H5应用越来越多,因 ...
- 基于bootstrap的漂亮网站后台管理界面框架汇总
基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...
- java metronic_基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理...
大家对Bootstrap框架知识了解多少 Bootstrap是一个前端的技术框架,很多平台都可以采用,JAVA/PHP/.NET都可以用来做前端界面,整合JQuery可以实现非常丰富的界面效果,目前也 ...
- 完整,详细的基于jquery省市三级联动和基于angular的省市三级联动对比
前几天遇到需要输入地址的一个项目,里面就会有全国各个省市县的选择. 对于全国省市县的选择,难点在于全国省市县的数据资源.而具体的操作并不是很难. 本来我想免费发送资源的,可是csdn,这最少也需要1积 ...
- java毕业设计基于Bootstrap框架的读书网站设计与实现mybatis+源码+调试部署+系统+数据库+lw
java毕业设计基于Bootstrap框架的读书网站设计与实现mybatis+源码+调试部署+系统+数据库+lw java毕业设计基于Bootstrap框架的读书网站设计与实现mybatis+源码+调 ...
- java毕业设计基于Bootstrap的家具商城系统设计mybatis+源码+调试部署+系统+数据库+lw
java毕业设计基于Bootstrap的家具商城系统设计mybatis+源码+调试部署+系统+数据库+lw java毕业设计基于Bootstrap的家具商城系统设计mybatis+源码+调试部署+系统 ...
- 年季度月周日控件html,基于bootstrap按年、季度、年月、年月日的日历插件(原创)...
插件描述:基于bootstrap按年.季度.年月.年月日的日历插件,作为bootstrapdatetimepicker的扩展 更新时间:2020-07-02 22:02:19 更新说明:修改yk-da ...
- 置信区间(Confidence Intervals)是什么?如何计算置信区间?置信区间的两种计算方法是什么?二值样本置信区间如何计算?如何基于bootstrap抽样进行置信区间计算?
置信区间(Confidence Intervals)是什么?如何计算置信区间?置信区间的两种计算方法是什么?二值样本置信区间如何计算?如何基于bootstrap抽样进行置信区间计算? 目录 置信区间( ...
最新文章
- Gitlab完整搭建手册+排错
- 视频导切台控制说明:RGBLink MiniPro初步测试
- linux过滤脚本中的字段,Shell脚本中常用的文本过滤命令
- java reference详解_Java Reference详解
- 怎么设置电脑锁屏不断网
- leetcode-832-Flipping an Image
- java中Date,SimpleDateFormat
- 项目不能使用fn标签_无服务器,Java和FN项目的第一步
- 2018年智能手表出货量曝光 苹果Apple Watch占据半壁江山
- CentOS7下Maven安装脚本
- eclipse运行java项目
- matlab液压仿真模型,基于MATLABsimulink的液压系统动态仿真.ppt
- OSDev——GCC交叉编译器
- PCL包围盒计算原理及代码
- AI四小龙排队上市,AI嗅觉为何还没有独角兽?
- 使用gihub搭建个人博客
- fiddler抓手机APP包(安卓)
- XenApp发布IE为默认最大化
- 利用viewbag把数据对象传到前端并转换成json对象,及解决json字符串被转义问题
- Aspose.Cells 给EXCEL区域内加上单元格边框
热门文章
- Hadoop分布式系统集成架构
- 在Leiden早期关节炎人群中建立预测放射学进展的RA骨结构破坏的复合生物标记...
- nodemcu web公告栏
- ssh2java传输文件_使用ganymed-ssh2包的java scp文件
- favicon自动获取_php获取网站favicon.ico图标 api源码 自动获取并添加Favicon图标
- AtCoder Beginner Contest 244 B题(超详讲解)
- 永久删除计算机硬盘中数据的快捷键,如何使用老毛桃winpe的分区助手删除硬盘所有分区并快速擦除硬盘数据?...
- 1-1、惠普DL380 配置bios,raid
- 折纸机器人的步骤图解_儿童折纸:正方形纸张简单折纸机器人(步骤图解)
- docker镜像格式