<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>
分享到：
相关推荐
javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单
js二级联动 省市级联 完整省市js js二级联动_精简实用版，附带注释说明，使用简单，方便集成。
javascript二级联动菜单,可根据你的选择生成表格。 功能是二个页面之间值的传递。
<script type="text/javascript" src="jquery-1.6.4.js"> <script type="text/javascript"> try{ var sf=new Array(); sf[0]=new Array("北京市","东城|西城|崇文|宣武|朝阳|丰台|石景山|海淀|门头沟|房山|...
javascript 二级联动菜单
全国省市二级联动菜单 JavaScript 全国省市二级联动菜单 JavaScript
js 二级联动菜单 路过的高手指点，低手分享js 二级联动菜单 路过的高手指点，低手分享
JavaScript案例-js二级联动菜单
本文实例为大家分享了js实现select二级联动下拉菜单，供大家参考，具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()...
js实现的二级菜单联动。选择的是省市联动
JavaScript 二级联动下拉列表
二级联动 js html 简单的二级联动
省市二级联动JS代码 省市联动 二级联动
单文件html+js二级联动完整示例可默认选择指定选项,不依赖jq等其他第三方组件。小巧精炼。
javascript实现二级的省份城市联动。 var aprovince = [ ["--请选择省份--"], ["北京"], ["上海"], ["广东"], ["湖南"] ]; var acity = [ ["--请选择城市--"], ["东城区","西城区","南城区","北城区"], [...
js省市区二级联动和三级联动下拉菜单 网络上找的，和在一起的。我自己看了，挺好的。值得收藏。
省市二级联动js代码
详细的省市二级联动。数据直接定义在js里面的数组里面
JS城市二级联动+页面跳转，可以自己更改value
简单二级联动，原生js编写，可优化。。。。。。。。。