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>');
}
})
});
});
Jquery Json 下拉联动的更多相关文章
- Jquery实现下拉联动表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery实现下拉联动
很多项目用到这个功能,虽然写了不下5次以上了,一直没做过记录,记录一下,下次直接拷贝了,免得还得要重复写浪费时间. 先上HTML代码: 品牌: <select class="sa&qu ...
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- 基于jQuery+JSON的省市联动效果
省市区联动下拉效果在WEB应用中使用非常广泛,尤其在一些会员信息系统.电商网站最为常见,开发者一般使用AJAX实现无刷新下拉联动. 本文将讲述利用jQuery插件,通过读取JSON数据,实现无刷新动态 ...
- AJAX二级下拉联动【XML方式】
AJAX二级下拉联动案例 我们在购物的时候,常常需要我们来选择自己的收货地址,先选择省份,再选择城市- 有没有发现:当我们选择完省份的时候,出现的城市全部都是根据省份来给我们选择的.这是怎么做到的呢? ...
- jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...
- Jquery操作下拉框(DropDownList)实现取值赋值
Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...
- jQuery水平下拉菜单实现
<!DOCTYPE html> <html> <head> <title>jQuery水平下拉菜单实现</title> ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
随机推荐
- Css定位之absolute_慕课网课程笔记
absolute和float 绝对定位和浮动有相似之处,即都有破坏性和包裹性,破坏性是指其会导致包裹自身的复原塌陷,包裹性是float的天赋技能,对于绝对定位来说,其会包括子元素 越独立越强大 1.去 ...
- Model Validation in ASP.NET Web API By Mike Wasson|July 20, 2012 268 of 294 people found this helpful
using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using ...
- Navicat Premium相关注册码
--Navicat for SQL Server V10.0.10NAVD-3CG2-6KRN-IEPMNAVL-NIGY-6MYY-XWQENAVI-C3UU-AAGI-57FW --Navicat ...
- 为什么使用spring
现在基本的项目都会用到spring框架,那么我们为什么要使用spring呢?下面为大家总结一下,希望大家指正. spring是一个轻量级的容器框架,其核心是IOC(控制反转也叫依赖注入)和AOP(面向 ...
- WORD学习之制作座位表
1.点击插入-表格-插入表格,将表格的列数设置为6,行数为10,再点击“确定”按钮
- kali 渗透的一些笔记
kali实战笔记 17:55 2016/7/19 by: _Silvers kali系统安装后的配置及美化安装vmwareToolstar zxvf VMwareTools-sfsfsfasfasfs ...
- 添加sudo权限
进入超级用户模式.也就是输入"su -",系统会让你输入超级用户密码,输入密码后就进入了超级用户模式.(当然,你也可以直接用root用) 添加文件的写权限.也就是输入命令" ...
- IT girl
听着柔和的音乐,敲着自己喜欢的代码......
- SQL Server 2008创建oracle链接服务器(心得)
操作系统是32位的情况下,曾经没费太多时间创建好了到oracle的链接服务器.主要要点就是: 1.安装oracle精简客户端.当时我用的是版本比较低的“oracle9i310-客户端简化版”,安装好了 ...
- 突袭HTML5之WebGL 3D概述
WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件.WebGL同canvas 2D的API一样,都是通过脚本操纵对象,所以步骤也是基本相似:准备工作上下文 ...