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" οnchange="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" οnchange="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>
转载于:https://www.cnblogs.com/luchangyou/p/5775643.html
ajax实现下拉列表联动相关推荐
- ajax初级示例(下拉列表联动)
下拉列表联动效果如下动图: 数据库 表字段的信息 新建web项目 jar包及js 实体对象 index.jsp <%@ page language="java" conten ...
- php下拉列表 二级 联动,PHP+Ajax实现二级联动下拉菜单!
正文 字体大小: 中 PHP+Ajax实现二级联动下拉菜单! (2009-12-05 01:11:39) 标签: 杂谈 数据库 .................................... ...
- php js 二级联动_PHP+ajax实现二级联动菜单功能示例
本文实例讲述了PHP+ajax实现二级联动菜单功能.分享给大家供大家参考,具体如下: 如何实现二级联动 工作原理 二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于 ...
- html用ajax做三级联动,怎样使用JS+AJAX做出三级联动
这次给大家带来怎样使用JS+AJAX做出三级联动,使用JS+AJAX做出三级联动的注意事项有哪些,下面就是实战案例,一起来看一下. js 三级联动的实现代码如下所示: js原生ajax -请选择 省/ ...
- excel下拉列表联动_动态数组的Excel下拉列表
excel下拉列表联动 Select a region name in one Excel drop down list. Then, in the next drop down list, sele ...
- excel下拉列表联动_国家和城市的Excel下拉列表
excel下拉列表联动 In Excel, you can use data validation to create drop down lists on a worksheet. Usually, ...
- ajax的列表联动示例
ajax的列表联动示例 1. 输入域: 请选择省: <select id="sel1" onchange="return choose(this);"& ...
- 使用Ajax实现省市联动Bootstrap的基本使用
上节课我们已经讲了Ajax了,现在我们来使用Ajax来实现省市联动以及bootstrap的一些基本使用 目录 一.案例(使用Ajax实现省市联动) 二.Bootstrap的基本介绍 三.bootstr ...
- 基于JQuery Ajax实现三级联动获取SpringMVC接口的数据(详细一套)
本文实例为大家分享了ajax实现三级联动的具体代码,供大家参考(复制下来就可以用) 一.省市县数据表可见:全国各.省.市区/县sql语句 二.点我:切换二级联动 在静态页面写调用服务端接口,获取省.市 ...
最新文章
- 通电就可以工作,这些单片机真香!
- Mybatis查询传递单个参数和传递多个参数用法
- luogu2577/bzoj1899 午餐 (贪心+dp)
- itertools chain
- Eclipse中使用Git-让版本管理更简单
- 个人课中所学vlan相关知识整理
- [Android开发]zip文件压缩解压缩
- flutter 返回指定界面_Flutter 即学即用系列博客——04 Flutter UI 初窥
- TJU_SCS_软件测试_Lab1
- 一元、二元、三元逻辑运算符
- 双线性的定义以及他的性质
- 同济版《线性代数》引发激烈争议!
- Python: 用matplotlib.pyplot,绘制 cos 与 sin 函数图像
- IplImage详解
- 计算机专业网页设计周志,毕业论文(设计)周志范文.doc
- CGContextRef绘图-iOS球形波浪加载进度控件-HcdProcessView详解 1
- windows彻底永久关闭自动更新的方式
- hadoop 3.3.1 安装笔记
- 计算机 黑屏 显示桌面,电脑开机后显示桌面黑屏了怎么处理啊?
- APP设计之启动页和广告页
热门文章
- linux 错误处理命令,Linux运行脚本命令提示No such file or directory错误的解决办法
- Qt学习之路(28): 坐标变换
- web前端性能分析--实践篇
- 2014第3周四杂记
- 最新最全产品删除页代码
- ckeditor和ckfinder的使用
- HDU 3473 Minimum Sum
- 可以无限量服用的药材
- linux下的bc计算器设置scale精度
- [SQLITE_READONLY] Attempt to write a readonly databse (attempt to write a readonly database)