php jq ajax 4个下拉框联动案列,AJAX_AJAX实现下拉框联动，想当年，为了实现三级联动， - phpStudy...

AJAX实现下拉框联动

想当年，为了实现三级联动，找个js高手些了N多代码才搞定，但是很慢，因为一次要将所有的选项取来，然后排序，查找动态显示。

现在使用AJAX真是太方便了，下面做了个简单例子，实现下拉框的省市联动，效果图如下：

实现代码：

a.html

var　req　=　null;

function　test()　{

var　province　=　document.all("province").value;

req　=　new　ActiveXObject("Microsoft.XMLHTTP");

//设置属性，当后台处理完成后，回来调用myDeal方法。

req.onreadystatechange　=　myDeal;

//发出请求

req.open("GET",　"c.jsp?province="　+　province,　"false");

req.send(null);

}

function　myDeal()　{

if　(req.readyState　==　4)　{

//接收服务端返回的数据

var　ret　=　req.responseText;

//处理数据

var　obj　=　document.all("city");

for　(var　i　=　obj.options.length　-　1;　i　>=　0;　i--)　{

obj.options.remove(i);　//从后往前删除

}

var　ops　=　ret.split("|");

for　(var　i　=　0;　i　

var　op　=　ops[i];

var　ss　=　op.split(",");

var　oOption　=　document.createElement("OPTION");　//创建一个OPTION节点

obj.options.add(oOption);　　　　//将节点加入city选项中

oOption.innerText　=　ss[1];　　　　//设置选择展示的信息

oOption.value　=　ss[0];　　　　　　　　　//设置选项的值

}

}

}

省份：

河南

陕西

城市：

郑州

洛阳

c.jsp

String　id　=　request.getParameter("province");

System.out.println("id="+id);

if(id　!=null&&　id.equals("hn")){

out.println("zz,郑州市|ly,洛阳市");

}else　if(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 2005 T-SQL Query 学习笔记(2)

JavaScript学习笔记之获取当前目录的实现代码

DEDE验证码输出的时只显示数字方法

利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解