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

最新推荐文章于 2025-08-08 15:43:57 发布

原创最新推荐文章于 2025-08-08 15:43:57 发布 · 516 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #function #数据库 #table #html

web开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用Ajax和JavaScript实现省市联动下拉框的方法。通过监听用户选择的省份变化来动态加载对应的城市和区域选项。具体实现包括前端页面布局、JavaScript事件处理以及后端数据处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAd>

</TITLE>

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);">

</select>

</td>

<td>

省<select name="shi" onchange="testName(2,this.value);">

</select>

</td>

<td>

区<select name="qu">

</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;

}

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

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 [color=#FF0000]area_table[/color] where 市编号='" ff "' order by 区编号");

values.append("||");//区分市和区信息.

while(rs.next())

{

values.append(rs.getString(1) "," rs.getString(2) ";");

}

www.itzhe.cn

<网友回复>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];

www.itzhe.cn

ops.add(o);

}

o.value=v[i].split( ", ")[0];

v.text=v[i].split( ", ")[1];

在请问以下上面的v在哪儿定义的

<网友回复>不好意思哈

JScript code

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

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);

}

本篇文章来源于 www.itzhe.cn 原文链接：http://www.itzhe.cn/html/web/JSP/20071113/18380_2.html