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="width: 100px;" id="deptCode" name="deptCode">
<option value="">全部科室</option>
</select>
<select style="width: 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>‘);

                }
            })

        });
    });

  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。