高手莫入--AJAX实现下拉框联动
高手莫入--AJAX实现下拉框联动
想当年，为了实现三级联动，找个js高手些了N多代码才搞定，可是很慢，由于一次要将全部的选项取来，而后排序，查找动态显示。
如今使用AJAX真是太方便了，下面作了个简单例子，实现下拉框的省市联动，效果图以下：
实现代码：
a.html
<html>
<body>
<script language= "JavaScript">
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 < ops.length; 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]; //设置选项的值
}
}
}
</script>
省份：<select id= "province" name= "province" onchange= "test();">
<option value= "hn">河南</option>
<option value= "sx">陕西</option>
</select><br>
城市：<select id= "city" name= "city">
<option value= "zz">郑州</option>
<option value= "ly">洛阳</option>
</select><br>
</body>
</html>
<body>
<script language= "JavaScript">
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 < ops.length; 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]; //设置选项的值
}
}
}
</script>
省份：<select id= "province" name= "province" onchange= "test();">
<option value= "hn">河南</option>
<option value= "sx">陕西</option>
</select><br>
城市：<select id= "city" name= "city">
<option value= "zz">郑州</option>
<option value= "ly">洛阳</option>
</select><br>
</body>
</html>
c.jsp
<%@ page contentType=
"text/html;charset=UTF-8" language=
"java" %>
<%
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,咸阳市");
}
%>
<%
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提供数据。