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表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ... 
随机推荐
- 基本Guava工具
			使用Joiner类 将任意字符串通过分隔符进行连接到一起是大多程序员经常做的事情.他们经常使用array,list,iterable并且循环变量将每一个临时变量添加到StringBuilder当中 ... 
- .NET自带IOC
			.NET自带IOC 本文主要把MEF作为一种IOC容器进行讲解,.net中可用的IOC容器非常多,如 CastleWindsor,Unity,Autofac,ObjectBuilder,Structu ... 
- oracle中backup模式
			在数据库打开的情况下备份(归档模式),把表空间或者数据库置于backup 模式下, 如: SQL> alter database begin backup; Database altered ... 
- linux 原生系统发送电子邮件 (在本地与因特网)
			有用的资料在 Linux mail 命令 http://www.cnblogs.com/JemBai/archive/2012/01/24/2329136.html 还有这里 Linux系统下mail ... 
- ThinkPHP中连接mysql数据库的四种实用和通用的连接方法
			ThinkPHP内置了抽象数据库访问层,把不同的数据库操作封装起来,我们只需要使用公共的Db类进行操作,而无需针对不同的数据库写不同的代码和底层实现,Db类会自动调用相应的数据库适配器来处理.目前的数 ... 
- Android 获得各处图片的方法
			<pre name="code" class="java">//1,已将图片保存到drawable目录下 //通过图片id获得Drawable Re ... 
- LAMP编译安装遇到的问题
			apache安装 1, no SSL-C headers found configure: error: ...No recognized SSL/TLS toolkit detected 解决办法: ... 
- 以helloworld为例讲解magento中控制器的工作
			1.下面介绍的前提是你已经安装了magento ,版本是1.9.1.0. 2.下面是实际步骤 ①在工程下面创建下面的文件目录 app/code/local/Magentotutorial/Hellow ... 
- python并发获取snmp信息及性能测试
			python & snmp 用python获取snmp信息有多个现成的库可以使用,其中比较常用的是netsnmp和pysnmp两个库.网上有较多的关于两个库的例子. 本文重点在于如何并发的获取 ... 
- Java代码到字节码——第一部分
			Java代码到字节码——第一部分 原文地址 作者:James Bloom 译者:张坤 理解在Java虚拟机中Java代码如何别被编译成字节码并执行是非常重要的,因为这可以帮助你理解你的程序在运行时发生 ... 
