ajax实现下拉列表联动
下拉框代码
<fieldset style="margin-bottom:5px;">
<div class="form-group">
<label for="disabledSelect" class="col-sm-4 control-label">医院名称</label>
<div class="col-sm-8">
<select id="hospitalCode" class="form-control" name="hospitalCode" onchange="handle();">
<c:forEach items="${institutionList }" var="institution">
<option value="${institution.medInstitutionCode }" <c:if test="${institution.medInstitutionCode == doctorSchedule.hospitalCode }">selected="selected"</c:if>>${institution.medInstitutionName }</option>
</c:forEach>
</select>
</div>
</div>
</fieldset>
<input type="hidden" name="scheduleId" value="${doctorSchedule.scheduleId }"/>
<input type="hidden" name="id" value="${doctorSchedule.id }"/>
<fieldset style="margin-bottom:5px;">
<div class="form-group">
<label for="disabledSelect" class="col-sm-4 control-label">科室名称</label>
<div class="col-sm-8">
<select id="keshiCode" class="form-control" name="keshiCode" onchange="keshi();">
<option value="${doctorSchedule.keshiCode }">${doctorSchedule.keshi }</option>
</select>
</div>
</div>
</fieldset>
<fieldset style="margin-bottom:5px;">
<div class="form-group">
<label for="disabledSelect" class="col-sm-4 control-label">医生姓名</label>
<div class="col-sm-8">
<select id="doctorId" class="form-control" name="doctorId">
<option value="${doctorSchedule.doctorId }">${doctorSchedule.doctorName }</option>
</select>
</div>
</div>
</fieldset>
js代码
<script type="text/javascript">
function handle(){
var hospitalCode = $("#hospitalCode").val();
//alert(aaa);
$.ajax({
type: "post",
url: "xxx.json",
data: {"hospitalCode":hospitalCode},
dataType: "json",
success: function(date){
//var dataObj = eval("("+data+")");
var dataObj = eval(date);
//alert(dataObj.data[0].keshiName);
var dataArr = dataObj.data;
var keshi = $("#keshiCode");
keshi.empty();
if(date==null){
keshi.append("<option value = '-1'>"+"科室为空"+"</option>");
}
if(dataArr!=null){
for(var i =0;i<dataArr.length;i++){
var item=dataArr[i];
keshi.append("<option value = '"+item.keshiCode+"'>"+item.keshiName+"</option>");
};
}
}
});
}
function keshi(){
var keshiCode = $("#keshiCode").val();
//alert(keshiCode);
$.ajax({
type: "post",
url: "xxx.json",
data: {"keshiCode":keshiCode},
dataType: "json",
success: function(date){
//var dataObj = eval("("+data+")");
var dataObj = eval(date);
//alert(dataObj.data[0].keshiName);
var dataArr = dataObj.data;
var doctor = $("#doctorId");
doctor.empty();
if(date==null){
doctor.append("<option value = '-1'>"+"医生为空"+"</option>");
}
if(dataArr!=null){
for(var i =0;i<dataArr.length;i++){
var item=dataArr[i];
doctor.append("<option value = '"+item.doctorId+"'>"+item.userName+"</option>");
};
}
}
});
}
</script>
ajax实现下拉列表联动的更多相关文章
- JS ajax 应用 (下拉列表联动)
<script language="javascript"> var http_request=false; function send_request( ...
- JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)
ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载 ...
- JQuery+Ajax实战三级下拉列表联动(八)
本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...
- JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法(让你真正理解ajax)
ajax 下拉列表联动的用法. ajax的定义: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...
- AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;
js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...
- 转:『代码』JS封装 Ajax级联下拉列表
在博客园看到一篇不错的AJAX级联下拉列表,觉得不错,特地拿下来 :转载来自:『大雪无痕』 ,原文地址 //当一个 下拉列表 改变时,触发所有联动:(警告:各下拉列表之间 请不要出现 循环依赖) // ...
- JQ+AJAX实现多级联动
利用JQ与AJAX实现三级联动实现的效果: 当前两级改变时,后边一级或两级都会改变: 使用的数据库: html代码: <!doctype html> <html lang=" ...
- 基于MVC3下拉列表联动(JQuery)
上次项目中遇到一个需要多个下拉列表联动的操作,今天有空将实现方式整理以便以后参考. 要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化.如:选择中国,则另个一下拉框里显示中国各个省份. 传 ...
- ajax 实现三级联动
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...
随机推荐
- Struts2更改配置文件struts.xml默认路径
struts2配置文件默认存放路径在/WEB-INF/classes目录下,即将struts.xml放在src的目录下. 但是为了协作开发与方便管理,我们有时需要把struts.xml放到其他位置 s ...
- IceMx.Mvc 我的js MVC 框架 二、视图的数据绑定
介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...
- eclipse plugin 导出插件包
当我们的插件在完成一个阶段性开发的时候,我们要发布一个1.0的版本.这个时候会碰到一个问题.如何把我们的插件打成包?有多种途径,下面具体讨论一下. 首先从插件完成到被他人(或者我们自己)使用有两个步骤 ...
- 基于BrokerPattern服务器框架
基于BrokerPattern服务器框架 RedRabbit 经典网游服务器架构 该图省略了专门用途的dbserver.guildserver等用于专门功能的server,该架构的优点有: l Log ...
- python tornado nginx deployment tornado 的部署在linux Nginx服务器
题外话: 这里分享一个链接是将Flask 和 Apache 用 mod_wsgi 来进行传唤的部署方式,在digital ocean VPS 上的. https://www.digitalocean. ...
- Js继承小结
Js继承小结 一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.n ...
- 传统的MVC模式
对于MVC模式,我们可以将可视化UI呈现,UI处理逻辑和业务逻辑分别定义在View,Controller,和Model中. 可视化UI呈现->View UI处理逻辑->Controller ...
- 使用EasyMock对Servlet进行简单的测试
这是一个WebProject,但不需配置web.xml,因为EasyMock用不上它 首先是用到的实体类User.java package com.jadyer.model; public class ...
- poj 1088 滑雪(贪心算法)
思想: (贪心算法 ,看到题目是中文才做的) 先对数组中的数据进行排序,从最小的数据计算 当前的顶点的可以滑行的最大值=max(周围可达的顶点的可以滑行的最大值)+1 这样计算最后产生的路径肯定是最大 ...
- express框架+jade+bootstrap+mysql开发用户注册登录项目
完整的项目代码(github):https://github.com/suqinhui/express-demo express是基于Node.js平台的web应用开发框架,用express框架开发w ...