C#基于Bootstrap的三级联动

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Node.js›Node.js教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

实现效果如图：

一、声明市、县、乡对应的下拉控件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);
        }