求教 ASP+JS 二级联动多选下拉菜单问题

数据库
表1：Spot_City 城市名（City_Name）城市ID（City_ID）
表2：Spot_List 景区名（Area_Name）城市ID（City_ID） 景区ID（Area_ID）

使用如下代码显示，后面的可多选

问题:
城市1下有7个景区
城市2下有1个景区

选择城市1,对应的7个景区显示正确
再选择城市2，应该只出现一个景区，但是城市1的景区也出现在列表里

请教高手如何解决？

代码如下：
<!--#include file="inc/conn.asp"-->
<form name="frm" action="Periphery_save.asp" method="post" id="frm">
<select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
<option value="478" selected="selected">请选择</option>
<%
set rsc=server.createobject("adodb.recordset")
sqlc="select * from Spot_City"
rsc.open sqlc,conn,1,1
do while not rsc.eof
response.write "<option value='"+CStr(rsc("City_ID"))+"'>"+rsc("City_Name")+"</option>"+chr(13)+chr(10)
rsc.movenext
loop
rsc.close
%>
</select>


<select name="s2" size="5" multiple>
<option value="479" selected="selected">请选择</option>
</select>
<input type="submit" name="Submit" value="提交" />
<input name="id" type="hidden" id="id" value="<%=request("ID")%>" />
</form>





<script language="javascript">
//获取一级菜单长度
var select1_len = document.frm.s1.options.length;
var select2 = new Array(select1_len);

//把一级菜单都设为数组
for (i=0; i<select1_len; i++)
{
select2 = new Array();
}

//定义基本选项
<%
set rsd=server.createobject("adodb.recordset")
sqld="select * from Spot_List"
rsd.open sqld,conn,1,1
if rsd.eof and rsd.bof then
response.End()
else
do while not rsd.eof%>
select2[<%=rsd("City_ID")%>][<%=rsd("Area_ID")%>] = new Option("<%=rsd("Area_Name")%>", "<%=rsd

("Area_ID")%>");
<%rsd.movenext
loop
end if
rsd.close
%>
//联动函数
function redirec(x)
{
var temp = document.frm.s2;
for (i=0;i<select2[x].length;i++)
{
temp.options=new Option(select2[x].text,select2[x].value);
}
temp.options[0].selected=true;
}

</script>