如何做到第一个下拉框的变化引起后面2个甚至更多的下拉框的变化

[iamjeff]

如果有一张表是“城市”，另外2张是“城市中的商店”“城市中的医院”
--城市--
id cityname
1 北京
2 哈尔滨
3 济南

--商店--
id shopname cityid
1 北京百货公司 1
2 加乐福 1
3 沃尔马哈尔滨店 2
4 济南第一百货商店 3
5 哈尔滨百货大楼 2

--医院--
id hospitalname cityid
1 协和医院 1
2 哈医大二院 2
3 山东第二医院 3
4 济南市第四人民医院 3

假设表是这样的，怎么才能用javascript实现选择一个城市后，出现对应的商店和医院。

[hbhbhbhbhb1021]

<select name=select1 onchange=showNext(this)>
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">哈尔滨</option>
</select>
<select name=select2>
<option value="0">--请选择--</option>
</select>
<select name=select3>
<option value="0">--请选择--</option>
</select>
<script language=javascript>
function showNext(obj)
{
switch(obj.value)
{
case "1":
document.getElementById("select2").outerHTML="<select name=select2><option value='0'>--请选择--</option><option value='1'>北京百货公司</option><option value='2'>加乐福</option></select>"
document.getElementById("select3").outerHTML="<select name=select3><option value='0'>--请选择--</option><option value='1'>协和医院</option></select>";
break;
case "2":
case "1":
document.getElementById("select2").outerHTML="<select name=select2><option value='0'>--请选择--</option><option value='5'>哈尔滨百货大楼</option></select>"
document.getElementById("select3").outerHTML="<select name=select3><option value='0'>--请选择--</option><option value='2'>哈医大二院</option></select>"
break;
case "2":
case "0":
document.getElementById("select2").outerHTML="<select name=select2><option value='0'>--请选择--</option></select>"
document.getElementById("select3").outerHTML="<select name=select3><option value='0'>--请选择--</option></select>"
}
}
</script>

[iamjeff]

数据要从数据库里面动态取出，也就是ASP+JS完成。

难道板块发错了

[hbhbhbhbhb1021]

在onchange事件中取数据
用response.write "<option value='"&rs("id")&"'>"&rs("name")&"</option>"
组合取把上面的代码打出来

[quanke1981]

给你个提示吧，需要我再给你代码

1.刷新页面，提交给自己
<select name=select1 onchange="SubmitForm();">
<option value="0">--请选择--</option>
<% while not rs.eof
response.write <option value="<%=i%>"><%=rs.filed("..").value%></option>
Wend
%>
</select>

<script>
function SubmitForm()
{
......
}
</script>

2.使用xmlhttp，不刷新页面。前后台用DOM传递数据，例子可以在网上查到..

根据情况使用，如果数据量很大，建议还是刷新页面，因为xmlhttp在数据返回前，网页没有任务响应，好像IE死掉了一样。

[mingxuan3000]

1。每次select后，提交,从数据库检索，重新生成
2。纯javaScript实现。
把所有数据全取出来，放到隐藏控件里，然后动态生成 ，这种比较麻烦

我这有n级实现的代码,是java + struts 的

[iamprobe]

<script language = "JavaScript">
sall=new Array();
sall1=new Array();
<%
Dim i
i=0
dim j
j=0
set rs2=server.createobject("adodb.recordset")
set rs3=server.createobject("adodb.recordset")
sqltext="SELECT * FROM 商店"
sqltext1="SELECT * FROM 医院"
rs2.open sqltext,conn,1,1
rs3.open sqltext1,conn,1,1
do while not rs2.eof
%>
sall[<%=i%>]=new Array("<%=rs2("shopname")%>","<%=rs2("cityid")%>","<%=rs2("id")%>");
<%
i=i+1
rs2.movenext
loop
rs2.close
do while not rs3.eof
%>
sall1[<%=j%>]=new Array("<%=rs3("hospitalname")%>","<%=rs3("cityid")%>","<%=rs3("id")%>");
<%
j=j+1
rs3.movenext
loop
rs3.close
%>
function changeselect(selvalue)
{
document.form.shop.length=0;
var selvalue=selvalue;
var i;
for(i=0;i<sall.length;i++)
{
if(sall[i][1]==selvalue)
{
var newOption1=new Option(sall[i][0],sall[i][2]);
document.all.shop.add(newOption1);
}
}
document.form.hospital.length=0;
var j;
for(j=0;j<sall1.length;j++)
{
if(sall1[j][1]==selvalue)
{
var newOption2=new Option(sall1[j][0],sall1[j][2]);
document.all.hospital.add(newOption2);
}
}
}
</script>
<form name="form">
<%set rs1=server.createobject("adodb.recordset")
sqltext="SELECT * FROM 城市"
rs1.open sqltext,conn,1,1%>
<select name="city" onChange="changeselect(document.form.city.options[document.form.city.selectedIndex].value)" >
<option value="" selected>请选择</option>
<%do while not rs1.eof%>
<option value='<%=rs1("id")%>'><%=rs1("cityname")%></option>
<%rs1.movenext
loop
rs1.close
set rs1=nothing%>
</select>
<select name="shop">
<option value="" selected>请选择</option>
</select>
</select>
<select name="hospital">
<option value="" selected>请选择</option>
</select>
</form>

[iamjeff]

顶一下