zoukankan      html  css  js  c++  java
  • Jquery Json 下拉联动

     #region dataTable转换成Json格式
            /// <summary>  
            /// dataTable转换成Json格式  
            /// </summary>  
            /// <param name="dt"></param>  
            /// <returns></returns>  
            public static string DataTable2Json(DataTable dt)
            {
                StringBuilder jsonBuilder = new StringBuilder();
                jsonBuilder.Append("{"dept");
                jsonBuilder.Append(dt.TableName);
                jsonBuilder.Append("":[");
                jsonBuilder.Append("[");
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    jsonBuilder.Append("{");
                    for (int j = 0; j < dt.Columns.Count; j++)
                    {
                        jsonBuilder.Append(""");
                        jsonBuilder.Append(dt.Columns[j].ColumnName);
                        jsonBuilder.Append("":"");
                        jsonBuilder.Append(dt.Rows[i][j].ToString());
                        jsonBuilder.Append("",");
                    }
                    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                    jsonBuilder.Append("},");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("]");
                jsonBuilder.Append("]");
                jsonBuilder.Append("}");
                return jsonBuilder.ToString();
            }
    
            #endregion dataTable转换成Json格式
    

      前台  

    HTML代码

    <lable>院区选择:</lable>
    <input class="yq" type="radio" name="hospital" id="radio" value="0" checked="checked"><label for="radio">西院</label>
    <input class="yq" type="radio" name="hospital" id="radio2" value="2"><label for="radio2">东院</label>

    <select style=" 100px;" id="deptCode" name="deptCode">
    <option value="">全部科室</option>
    </select>
    <select style=" 100px;" id="docCode" name="docCode">
    <option value="">全部医生</option>
    </select>

        $(function () {
    //此处我放的是 radio 的选中事件
     $("input[name=hospital]").click(function () {
              
                //获取radio 选中的值
                var hospital = $("input[name='hospital']:checked").val();
    
                $.post("@Url.Action("GetDeptByHospital", "PatientBooking")", { hospital: hospital }, function (data) {
                    //将返回的json eval()
                    var jsonList = eval("(" + data + ")");
               
                    $.each(jsonList.dept, function (index, b) {
                        
                        for (var i = 0; i < b.length; i++) {
    //将值循环添加到 下拉列表中    -------  deptCode=下拉列表的ID
                            $("#deptCode").append('<option value=' + b[i].dept_code + '>' + b[i].dept_name + '</option>');
                         
                        }
                    })
    
                });
            });
        });
    

        下拉联动效果代码

     $('#deptCode').change(function () {
            var hospital = $("input[name='hospital']:checked").val();
            var DeptCode = $("#deptCode").val();
            $.post("@Url.Action("YY08GetDeptMedicalByHospitalAndDeptCode", "PatientBooking")", { hospital: hospital,deptCode:DeptCode }, function (data) {
              
                var jsonList = eval("(" + data + ")");
    
                $.each(jsonList.dept, function (index, b) {
                
                    for (var i = 0; i < b.length; i++) {
    //  expert_id,expert_name = json 定义的字段   
                        $("#docCode").append('<option value=' + b[i].expert_id + '>' + b[i].expert_name + '</option>');
    
                    }
                })
    
            });
        });
    

      

  • 相关阅读:
    ChartControl第一课简短的控件初步设计
    DevExpress中ChartControl柱状图(Bar)用法
    devexpress中用ChartControl生成柱状图
    ChartControl一个小Demo
    初识Devexpress ChartControl 之 动态添加stepline及TextAnnotation
    DEV控件之ChartControl用法
    DevExpress]ChartControl 创建Drill-Down样式的Title
    winform CheckedListBox实现全选/全不选
    winform 配置文件的加密解密
    Winform自定义窗体样式,实现标题栏可灵活自定义
  • 原文地址:https://www.cnblogs.com/zy-theone/p/4208607.html
Copyright © 2011-2022 走看看