JS二级联动
<form name="frm">
<select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
<option selected>请选择</option>
<option value="1">脚本语言</option>
<option value="2">高级语言</option>
<option value="3">其他语言</option>
</select>
<select name="s2">
<option value="请选择" selected>请选择</option>
</select>
</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[i] = new Array();
}
//定义基本选项
select2[0][0] = new Option("请选择", " ");
select2[1][0] = new Option("PHP", " ");
select2[1][1] = new Option("ASP", " ");
select2[1][2] = new Option("JSP", " ");
select2[2][0] = new Option("C/C++", " ");
select2[2][1] = new Option("Java", " ");
select2[2][2] = new Option("C#", " ");
select2[3][0] = new Option("Perl", " ");
select2[3][1] = new Option("Ruby", " ");
select2[3][2] = new Option("Python", " ");
//联动函数
function redirec(x)
{
var temp = document.frm.s2;
for (i=0;i<select2[x].length;i++)
{
temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);
}
temp.options[0].selected=true;
}
</script>
把函数改为：
function redirec(x)
{
if(x!="0")
{
var temp = document.frm.s2;
temp.options.length=select2[x].length;
for (i=0;i<select2[x].length;i++)
{
temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);
}
temp.options[0].selected=true;
}
else
{
window.location.reload();
}
}
或：
function redirec(x){
var temp = document.frm.s2;
temp.options.length=0;
for (i=0;i<select1[x].length;i++){
temp.options[i]=new Option(select1[x][i].text,select1[x][i].value);
}
temp.options[0].selected=true;
}
以下为用JSP改动的动态二级联动：
<body>
<form name="frm" action="servlet/StationAdd" method="post">
县（市）:
<select name="city" onChange="redirec(document.frm.city.options.selectedIndex)">
<option value="" selected>请选择</option>
<%
Connection conn = DB.getConn();
String citysql = "select * from category where grade = 1 order by id";
Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
ResultSet rs = DB.getQuery(stmt, citysql);
rs.last();
int citynum = rs.getRow();
//rs.beforeFirst();
rs.first();
int count[] = new int[citynum+1];
for(int i = 1; i<=citynum; i++){
int id = rs.getInt("id");
count[i] = id;
%>
<option value="<%=rs.getString("name") %>"><%=rs.getString("name") %></option>
<%
rs.next();
}//for end
rs.close();
%>
</select>
<br>镇（乡）:
<select name="town">
<option value="" selected>请选择</option>
</select>
<br>名称:
<input type="text" name="name">
<br><br>备注:
<textarea rows="3" cols="20" name="description"></textarea>
<br>
<input type="button" value="提交" onClick="check()">
</form>
<script language="javascript">
//获取一级菜单长度
var select1_len = document.frm.city.options.length;
var select2 = new Array(select1_len);
//把一级菜单都设为数组
for (i=0; i<select1_len; i++)
{
select2[i] = new Array();
}
//定义基本选项
select2[0][0] = new Option("请选择", " ");
<%
for(int i=1; i<=citynum;i++){
String townsql = "select * from category where pid = " + count[i];
ResultSet townrs = DB.getQuery(stmt, townsql);
townrs.last();
int townnum = townrs.getRow();
townrs.first();
for(int j=0; j<townnum; j++){
%>
select2[<%=i%>][<%=j%>] = new Option("<%=townrs.getString("name")%>", "<%=townrs.getString("name")%>");
<% townrs.next();
}
townrs.close();
}
stmt.close();
conn.close();
%>
//联动函数
function redirec(x)
{
var temp = document.frm.town;
temp.options.length=0;
for (i=0;i<select2[x].length;i++)
{
temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);
}
temp.options[0].selected=true;
}
</script>
</body>