C# 基于Bootstrap的三级联动

实现效果如图：

一、声明市、县、乡对应的下拉控件select

 <div class="form-group">

        <label class="col-sm-1 control-label" for="ds_username">

            所选区域:</label>

        <div class="col-sm-2">

            <select id="sl_shi" class="form-control">

                <option value=""></option>

            </select>

        </div>

        <div class="col-sm-2">

            <select id="sl_xian" class="form-control">

            </select>

        </div>

        <div class="col-sm-2">

            <select id="sl_xiang" class="form-control">

            </select>

        </div>

        <div class="col-sm-2">

            <button type="button" class="btn btn-primary">

                查询</button>

        </div>

    </div>

二、JS代码：三级联动改变上一级的值触发下一级的数据绑定，因为首次绑定不会触发改变事件，所以默认一个空列，让用户自己选择。

  <script type="text/javascript">

        $(function () {//默认绑定省

            ShiBind();

            //绑定事件

            $("#sl_shi").change(function () {

                XianBind();

            });

            $("#sl_xian").change(function () {

                XiangBind();

            });

        });

        function ShiBind() {

            $.ajax({

                type: 'get',

                url: 'jgdx.ashx?action=bindShi',

                dataType: 'json',

                success: function (datas) {//返回list数据并循环获取

                    var select = $("#sl_shi");

                    for (var i = ; i < datas.length; i++) {

                        select.append("<option value='" + datas[i].id + "'>"

                                            + datas[i].shi + "</option>");

                    }

                    $('.selectpicker').selectpicker('val', '');

                    $('.selectpicker').selectpicker('refresh');

                }

            });

        }

        function XianBind() {

            var shi = $("#sl_shi").val();

            //判断下拉框选中的值是否为空

            if (shi == "") {

                return;

            }

            $("#sl_xian").html("");

            $("#sl_xiang").html("");

            $.ajax({

                type: "POST",

                url: "jgdx.ashx",

                data: { "action": "bindXian", "id": shi },

                dataType: "JSON",

                async: false,

                success: function (datas) {//返回list数据并循环获取

                    var select = $("#sl_xian");

                    select.append("<option value='0'>   </option>");

                    for (var i = ; i < datas.length; i++) {

                        select.append("<option value='" + datas[i].id + "'>"

                                            + datas[i].xian + "</option>");

                    }

                    $('.selectpicker').selectpicker('val', '');

                    $('.selectpicker').selectpicker('refresh');

                }

            });

        }

        function XiangBind() {

            var shi = $("#sl_shi").val();

            var xian = $("#sl_xian").val();

            if (xian == "") {

                return;

            }

            $("#sl_xiang").html("");

            $.ajax({

                type: "POST",

                url: "jgdx.ashx",

                data: { "action": "bindXiang", "xian": xian, "shi": shi },

                dataType: "JSON",

                async: false,

                success: function (datas) {//返回list数据并循环获取

                    var select = $("#sl_xiang");

                    select.append("<option value='0'>   </option>");

                    for (var i = ; i < datas.length; i++) {

                        select.append("<option value='" + datas[i].id + "'>"

                                            + datas[i].xiang + "</option>");

                    }

                    $('.selectpicker').selectpicker('val', '');

                    $('.selectpicker').selectpicker('refresh');

                }

            });

        }

    </script>

三、后台代码：从数据库读取数据，转换为json串，返回前台。

        public void ProcessRequest(HttpContext context)

        {

            string output = "";

            string action = context.Request["action"].ToString();switch (action)

            {case "bindShi":

                    output = BindShi();   //返回json格式：[{"id":"238","shi":"滨州市"},{"id":"236","shi":"德州市"}]

                    break;

                case "bindXian":

                    output = BindXian(context);  //[{"id":"2525","xian":"城阳区"},{"id":"2534","xian":"黄岛区"}]

                    break;

                case "bindXiang":

                    output = BindXiang(context);  //[{"id":"21195","xiang":"岙山卫镇"},{"id":"21191","xiang":"北安街道"}]

                    break;

                default:

                    break;

            }

            context.Response.ContentType = "text/plain";

            context.Response.Write(output);

        }