收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

基于Bootstrap实现城市三级联动

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

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 select下拉搜索插件使用方法详解
bootstrap-select是boot的下拉搜索插件,使用的时候有时我们需要动态从后台或者直接加载动态数据。下面是根据一级下拉菜单,动态加载二级联动方式。(

Bootstrap实现下拉菜单多级联动
本文实例为大家分享了Bootstrap实现下拉菜单多级联动的具体代码,供大家参考,具体内容如下!DOCTYPEHTMLhtmllang="zh-CN"headmetacharset="UTF-8"titleBootstrap3的多级

bootstrap实现二级下拉菜单效果
本文实例为大家分享了bootstrap实现二级下拉菜单展示的具体代码,供大家参考,具体内容如下!DOCTYPEhtmlhtmlheadtitleBootstrap实例-基本的按钮下拉菜单/titlelin

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的!
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号