JS二级联动-CSDN博客

本文链接：https://blog.csdn.net/JaHunter1/article/details/83337086

//把一级菜单都设为数组
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){
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>