基于Bootstrap实现城市三级联动

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

$(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,
)

 string sql = @"select * from sysfield where 1=1 and mytables='sysperson'and mycolums=@mycolums and parentid=@parentid ";