• 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>');
    
                    }
                })
    
            });
        });
    

      

  • 相关阅读:
    Java代码生成器多表配置优化,增加自定义实体功能
    Java代码生成器加入postgresql数据库、HikariCP连接池、swagger2支持!
    SSM/SpringBoot代码生成器全面升级—增加全新前后端分离响应式主题,修复若干Bug
    记一次真实的线上事故:一个update引发的惨案!
    昨日学习安排
    C++个人学习笔记
    C++位运算符
    随手写事two
    随手写事
    Tomcat一对多遇到得问题
  • 原文地址:https://www.cnblogs.com/zy-theone/p/4208607.html
Copyright © 2020-2023  润新知