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