Ajax实现无刷新三联动下拉框

其中省\ 市 \区在三张表中
省
provice_table
01  江苏
02   重庆
市
city_table
11  南京 01区
area_table
22  无锡  11

http://blog.csdn.net/lip009/archive/2007/10/15/1826028.aspx
这里是一个js+xml的多级级联,道理基本相似,这里是从xml里读数据,你要求的是用ajax异步请求到数据库去拿数据
给你个思路:
第一次访问先去数据库拿到所有省的选项,添加到第一个下拉列表里,当第一个下拉列表选项值改变的时候根据省份去数据库查该省份所有的市集合,并返回添加到第二个下拉列表，同样的道理改变市的时候去查区
http://blog.csdn.net/lip009/archive/2006/09/11/1208343.aspx
这里有一个ajax二级联动的简单示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAd>
<TITLE><%=xmmc%>--<%=wjmc%>
</TITLE>
<script type="text/javascript">
if (window.ActiveXObject && !window.XMLHttpRequest) {
window.XMLHttpRequest=function() {
return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 6') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
};
}//取得XMLHttpRequest对象

var req;
var flagSelect;
function testName(flag,value)//
{
flagSelect = flag;
req=new XMLHttpRequest();
if (req)
{
req.onreadystatechange=setValue;
}
req.open('POST',"getLabelValue.do?flag="+flag+"&value="+value);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(null);
}
function setValue()
{
if (req.readyState==4 )
{
if(req.status==200)
{

if(flagSelect=="1")//如果选择某个省要更新市和区
{
var v=req.responseText.split("||");
paint(document.all("shi"),v[0]);
paint(document.all("qu"),v[1]);
}
if(flagSelect=="2")//如果选择某市,只需改变区
{
var v=req.responseText;
paint(document.all("qu"),v);
}
}
}
} function paint(obj,value)
{
var ops = obj.options;
while(ops.length>0)
{
  ops.remove(0);
}
for(var i=0;i<v.length-1;i++)
{
var o = document.createElement("OPTION");
o.value=v[i].split(",")[0];
v.text=v[i].split(",")[1];
ops.add(o);
}
}
</script>
<body>
<table>
   <tr>
    <td>
省<select name="pro" onchange="testName(1,this.value);">
           <option value="1">省一</option>
   </select>
</td>
  <td>
省<select name="shi" onchange="testName(2,this.value);">
           <option value="11">市一</option>
   </select>
</td>
  <td>
区<select name="qu">
           <option value="111">区一</option>
   </select>
</td>
   </tr>
</table>
</body>
</HTML>
写一个actioin
public class GetLabelValueAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
response.setContentType("text/xml; charset=GBK");
try {
PrintWriter out = response.getWriter();
String flag = request.getParameter("flag");
String value = request.getParameter("value");
if(flag==null)
{
return ;
}
StringBuffer values = new StringBuffer("");
           //getconnection;
//query
            //rs
if(flag.equals("1"))
{
    rs = stmt.executeQuery("select 市编号,城市名称 from city_table where 省编号='"+value+"' order by 市编号");
while(rs.next())
{
values.append(rs.getString(1)+","+rs.getString(2)+";");
}
String ff  = values.substring(0,values.indexOf(",")+1);//最得敢小的市编号
rs = stmt.executeQuery("select 区编号,区名称 from city_table where 市编号='"+ff+"' order by 区编号");
values.append("||");//区分市和区信息.
while(rs.next())
{
values.append(rs.getString(1)+","+rs.getString(2)+";");
}
}else if(flag.equals("2"))
{
   rs = stmt.executeQuery("select 区编号,区名称 from city_table where 市编号='"+value+"' order by 区编号");
while(rs.next())
{
values.append(rs.getString(1)+","+rs.getString(2)+";");
}
}
else
{
}
out.println(values.toString());
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}

在action中错了一点
if(flag.equals("1"))
            {
                rs = stmt.executeQuery("select 市编号,城市名称 from city_table where 省编号='"+value+"' order by 市编号");
                while(rs.next())
                {
                    values.append(rs.getString(1)+","+rs.getString(2)+";");
                }
                String ff  = values.substring(0,values.indexOf(",")+1);//最得敢小的市编号
                rs = stmt.executeQuery("select 区编号,区名称 from area_table where 市编号='"+ff+"' order by 区编号");
                values.append("||");//区分市和区信息.
                while(rs.next())
                {
                    values.append(rs.getString(1)+","+rs.getString(2)+";");
                }
            }

不好意思哈
function paint(obj,value)
            {
                 var v = value.split(";");//在这里啦
                 var ops = obj.options;
                    while(ops.length>0)
                    {
                      ops.remove(0);
                    }
                    for(var i=0;i<v.length-1;i++)
                    {
                        var o = document.createElement("OPTION");
                        o.value=v[i].split(",")[0];
                        v.text=v[i].split(",")[1];
                        ops.add(o);
                    }
            }

for(var i=0;i<v.length-1;i++)
                    {
                        var o = document.createElement("OPTION");
                        o.value=v[i].split(",")[0];
                        o.text=v[i].split(",")[1];//应该是o.text
                        ops.add(o);
                    }

在问以下
我运行的时候
页面提示有错
var v = value.split(";");//在这里啦
提示为空域不是对象

友情up中，AWUSOFT果然是高手啊！

找一个现成的JS的树代码
然后用AJAX分别取3个结果集 (这样查询的时候简单一点 )
添进来就好了

非常感谢
终于调出来了但我一点疑惑
在js中
var v=req.responseText.split("||");其中:req.responseText 他可以自动读出GetLabelValueAction中 values的数据
他是不是通过response 中的某个属性的到values中的字符串吗?

http://www.1024k.cn/develop/2007/200704/24699.html

调试易

Ajax实现无刷新三联动下拉框

解决方案 »