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="0"></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 = 0; 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 = 0; 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 = 0; 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);
        }