JS ajax 应用 (下拉列表联动)
<script language="javascript">
var http_request=false; function send_request(url){//初始化,指定处理函数,发送请求的函数 http_request=false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest){//Mozilla浏览器 http_request=new XMLHttpRequest(); if(http_request.overrideMimeType){//设置MIME类别 http_request.overrideMimeType("text/xml"); } } else if(window.ActiveXObject){//IE浏览器 try{ http_request=new ActiveXObject("Msxml2.XMLHttp"); }catch(e){ try{ http_request=new ActiveXobject("Microsoft.XMLHttp"); }catch(e){} } } if(!http_request){//异常,创建对象实例失败 window.alert("创建XMLHttp对象失败!"); return false; } http_request.onreadystatechange=processrequest; //确定发送请求方式,URL,及是否同步执行下段代码 http_request.open("GET",url,true); http_request.send(null); } //处理返回信息的函数 function processrequest(){ if(http_request.readyState==4){//判断对象状态 if(http_request.status==200){//信息已成功返回,开始处理信息 //document.getElementById('childboard').innerHTML=http_request.responseText; createOption(http_request.responseText); } else{//页面不正常 alert("您所请求的页面不正常!"); } } } function createOption(str){ var type=document.getElementById('tra_type').value; if(type == 'm'){ clearOption('tra_childboard'); }else{ clearOption('tra_cchildboard'); } var options=str.split("/"); for(var i=0; i<options.length; i++){ var option = options[i].split("_"); var id = option['0']; var text = option['1']; var obj if(type == 'm'){ obj = document.getElementById('tra_childboard'); }else{ obj = document.getElementById('tra_cchildboard'); } var varItem = new Option(text, id); obj.options.add(varItem); } if(type == 'm'){ getclass('tra_childboard','tra_cchildboard','c'); } } function clearOption(id){ var item = document.getElementById(id); for(var i=0;i<item.options.length;)
{ item.removeChild(item.options[i]); }
} function getclass(fboard,cboard,type){ var mainboardid=document.getElementById(fboard).value; var childboard = document.getElementById(cboard); var typeobj=document.getElementById('tra_type'); typeobj.value = type; if(type == 'm'){ clearOption('tra_childboard'); clearOption('tra_cchildboard'); var cchildboard = document.getElementById('tra_cchildboard'); var cvarItem = new Option("无", "0"); cchildboard.options.add(cvarItem);
}else{ clearOption('tra_cchildboard'); } var varItem = new Option("loading.....", ""); childboard.options.add(varItem); send_request('?m=pc&a=do_ofb_transfer_childboard&ajax=ajax&mainboardid='+mainboardid+'&type='+type);
} </script>
JS ajax 应用 (下拉列表联动)的更多相关文章
- js+ajax编码三级联动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
- ajax实现下拉列表联动
下拉框代码 <fieldset style="margin-bottom:5px;"> <div class="form-group"> ...
- 用户管理的设计--3.jquery的ajax实现二级联动
页面效果 实现步骤 1.引入struts整合json的插件包 2.页面使用jquery的ajax调用二级联动的js //ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 fu ...
- AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;
js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...
- 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 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...
- 转:『代码』JS封装 Ajax级联下拉列表
在博客园看到一篇不错的AJAX级联下拉列表,觉得不错,特地拿下来 :转载来自:『大雪无痕』 ,原文地址 //当一个 下拉列表 改变时,触发所有联动:(警告:各下拉列表之间 请不要出现 循环依赖) // ...
- JQ+AJAX实现多级联动
利用JQ与AJAX实现三级联动实现的效果: 当前两级改变时,后边一级或两级都会改变: 使用的数据库: html代码: <!doctype html> <html lang=" ...
随机推荐
- vue5 过滤器 模版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
- BZOJ 4144 Dijkstra+Kruskal+倍增LCA
思路: 先把所有的加油站 push进按weight排序的优先队列里 对于每个不是加油站的点 找到到它的点的最短路以及它来源的加油站 如果x和y有边 且x和y加油站的来源不一样 则它可以连边 跑一边Kr ...
- CloudFoundry 云平台部署
CloudFoundry云平台部署 CloudFoundry(TheOpenSourceCloudOperatingSystem)距离发布已经一年多了作为第一个开源的PaaS平台日臻成熟.在这一年里C ...
- Windows Server8下补丁分发配置与iSCSI配置
1.Win Server 8 下配置补丁分发(高清视频下载:http://down.51cto.com/data/424305)本视频适合于Windows Server系统管理员学习 650) thi ...
- Android控件-TabHost(二)
这边再补充一种更为灵活的方法,可以把TabWidget隐藏,用(RadioGroup+RadioButton)来代替,并利用监听器的方式来实现监听点击点击跳转Activity. 在讲解之前,先补充几点 ...
- OOM框架AutoMapper基本使用(2)
出于安全考虑,在后台与前台进行数据传输时,往往不会直接传输实体模型,而是使用Dto(Data transfer object 数据传输对象),这样在后台往前台传递数据时可以省略不必要的信息,只保留必要 ...
- Python正则表达式初识(十)附正则表达式总结
今天分享正则表达式最后一个特殊字符“\d”,具体的教程如下. 1.特殊字符“\d”十分常用,其代表的意思是数字.代码演示如下图所示. 其中“+”的意思是表示连续,在这里代表的意思是连续的数字.但是输出 ...
- 关于springmvc重定向后Cannot create a session after the response has been committed问题
首先先上代码吧,我在用springmvc进行response.sendRedirect(url);操作后报了Cannot create a session after the response has ...
- 紫书 习题 10-19 UVa 10868 (物理动能定理)
这道题看起来很长,而实际上就是考物理 可以用动能定理来算出末速度. 同时注意要特判绳子比桥还长的情况. #include<cstdio> #include<cmath> #de ...