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属性的方法,同时后 ...
随机推荐
- Windows Phone 十四、磁贴通知
磁贴(Tile) Windows Phone 磁贴种类: 小尺寸 SmallLogo:71x71: Square71x71 中等 Logo:150x150: Square150x150 宽 WideL ...
- PHP 返回JSON
有个朋友说PHP不能返回JSON对象,作为.net的我认为应该是可以的,设置一下header 就行了. 果不然,google 一下,备忘如下: <?php $result = array('Na ...
- Centos下设置VNC为3389端口
1.安装vnc yum install vnc vnc-server yum install vnc vnc-server 2.修改vnc端口,修改/usr/bin/vncserver ,把5900变 ...
- SecureCRT:保存输出日志的方法
处理地址: http://blog.sina.com.cn/s/blog_64c1dd210101gzgz.html 或者: http://renchen.blog.51cto.com/4531967 ...
- C++之检测文件结尾
当使用文件作为输入流时,为了确保适时的结束文件读取操作,程序要靠检查文件尾来判断该何时停止读取.常用的检查文件尾方法有两种: 两种方式均已将 fin 与文件关联,即 均已声明 fin 输入流,并已调用 ...
- ldap配置记录
记录一下最近研究ldap+nfs的情况 ldap这个东西上次研究nis的时候就有人说那是上个世纪的老东西了,不应该继续使用.虽然意识到如此但时间不够还是使用了nis,这次乘着重做就干脆切换到ldap, ...
- Samba快速配置
Samba是linux,unix,windows之间进行交互操作的软件组件,Sanma是基于GPL协议的自由开源软件. 快速配置samba文件服务器 1.关闭防火墙和SELinux [root@cen ...
- (Interface)接口特点
接口是一种规范.只要一个类继承了一个接口,这个类就必须实现这个接口中所有的成员 为了多态. 接口不能被实例化.也就是说,接口不能new(不能创建对象) 接口中的成员不能加"访问修饰符&quo ...
- PLSQL Developer导入Excel数据
LSQL Developer导入Excel数据 最近处理将Excel数据导入Oracle的工作比较多.之前都是采用Sqlldr命令行导入的方式处理.每次导入不同格式的Excel表数据,都需要先把Exc ...
- Web Compiler
Web Compiler The easiest and most powerful way to compile LESS, Scss, Stylus, JSX and CoffeeScript f ...