AJAX实现下拉框联动
想当年,为了实现三级联动,找个js高手些了N多代码才搞定,但是很慢,因为一次要将所有的选项取来,然后排序,查找动态显示。
现在使用AJAX真是太方便了,下面做了个简单例子,实现下拉框的省市联动,效果图如下:
实现代码:
a.html
varreq=null;
functiontest(){
varprovince=document.all("province").value;
req=newActiveXObject("Microsoft.XMLHTTP");
//设置属性,当后台处理完成后,回来调用myDeal方法。
req.onreadystatechange=myDeal;
//发出请求
req.open("GET","c.jsp?province="+province,"false");
req.send(null);
}
functionmyDeal(){
if(req.readyState==4){
//接收服务端返回的数据
varret=req.responseText;
//处理数据
varobj=document.all("city");
for(vari=obj.options.length-1;i>=0;i--){
obj.options.remove(i);//从后往前删除
}
varops=ret.split("|");
for(vari=0;i
varop=ops[i];
varss=op.split(",");
varoOption=document.createElement("OPTION");//创建一个OPTION节点
obj.options.add(oOption);//将节点加入city选项中
oOption.innerText=ss[1];//设置选择展示的信息
oOption.value=ss[0];//设置选项的值
}
}
}
省份:
河南
陕西
城市:
郑州
洛阳
c.jsp
Stringid=request.getParameter("province");
System.out.println("id="+id);
if(id!=null&&id.equals("hn")){
out.println("zz,郑州市|ly,洛阳市");
}elseif(id!=null&&id.equals("sx")){
out.println("xa,西安市|xy,咸阳市");
}
%>
这个功能挺实用的,选项数据可以从数据库中获取,为了把例子做简单点,就用jsp提供数据。相关阅读:
Mashups+AJAX打造全新Web开发
CSS属性与JavaScript 编码方法对照表
设置Linux系统文件权限
用CSS控制IE下中英文字体显示对齐
复制小说文本时出现的随机乱码的去除方法
利用HardwareButton操作Windows Mobile的硬件按钮
Attrib 显示、设置或删除指派给文件或目录的只读、存档、系统以及隐藏属性
oracle如何查看隐藏的参数
MySQL存在权限提升及安全限制绕过漏洞
linux下vi编辑器命令大全
SqlServer T-SQL Query 学习笔记(2)
JavaScript学习笔记之获取当前目录的实现代码
DEDE验证码输出的时只显示数字方法
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解