<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二级联动_精简实用版”是一个适用于快速实现省市级联功能的解决方案，它结合了JavaScript的基本概念和实际应用场景，是提升用户体验的一个有效工具。对于想要学习或使用这一功能的开发者来说，这是一个很...
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 二级联动菜单
在这个案例中，我们关注的是"js 二级联动"，这涉及到JavaScript的基础知识，如DOM操作、事件监听以及数据结构的处理。 首先，"ckcity.js"可能是实现二级联动功能的核心脚本文件。在这个文件中，开发者可能会定义一...
js 二级联动菜单 路过的高手指点，低手分享js 二级联动菜单 路过的高手指点，低手分享
在本案例中，"js二级联动菜单"是指利用JavaScript实现的一种下拉菜单功能，这种菜单通常出现在网站导航中，当用户选择一级菜单时，相关的二级菜单会自动展开，提供更具体的选项。 一级和二级联动菜单的实现主要涉及...
标题中的“省市二级联动代码JS”指的是在网页开发中实现的一种交互功能，它允许用户在选择省份后，自动更新下拉菜单以显示对应省份的城市，从而实现两级联动的效果。这种功能通常用于地址输入或者区域筛选等场景，...
总结来说，这个“单文件html+js二级联动完整示例”展示了如何利用纯JavaScript实现不依赖第三方库的二级联动效果，以及如何在页面加载时设置默认选中项。这个示例对于初学者理解和实践Web交互逻辑很有帮助，同时也...
本文实例为大家分享了js实现select二级联动下拉菜单，供大家参考，具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()...
二级联动 js html 简单的二级联动
压缩包中的"js省市区三级联动.rar"和"Js省市二级联动.rar"文件可能包含了实现这些功能的示例代码，可以下载后参考学习。通过理解并实践这些代码，你可以更好地掌握JS在构建省市区联动菜单方面的技巧。
根据给定的信息，我们可以提取并总结出关于“JavaScript 二级联动下拉列表”的知识点： ### 一、二级联动下拉列表概述 二级联动下拉列表是一种常见的网页交互设计模式，通常用于显示具有层级关系的数据。当用户在...
本示例中，我们关注的是“js实现的二级菜单联动”，特别是省市联动的应用。省市联动意味着当用户在一级菜单（省份）中选择一个选项时，二级菜单（城市）会动态更新显示与所选省份相关联的城市列表。这种功能可以极大...
javascript实现二级的省份城市联动。 var aprovince = [ ["--请选择省份--"], ["北京"], ["上海"], ["广东"], ["湖南"] ]; var acity = [ ["--请选择城市--"], ["东城区","西城区","南城区","北城区"], [...
省市二级联动js代码
省市二级联动JS代码是一种常见的前端开发技术，常用于创建具有交互性的网页表单，特别是当用户需要选择地理位置信息时。这种技术使得用户在选择省份后，下拉菜单会自动更新为对应省份的城市列表，提供了良好的用户...
在IT行业中，"省市js二级联动"是一种常见的前端交互功能，尤其在网页表单设计时，用于用户选择省市区信息。这种功能通过JavaScript实现，能够根据用户选择的省份动态加载对应的市区列表，提供了良好的用户体验。下面...
在ASP中，二级联动和三级联动下拉框是常见的功能，通常用于实现数据的筛选和过滤，例如在地区选择、商品分类等场景。下面将详细讲解如何在ASP中实现这些功能。 ### 二级联动下拉框 二级联动下拉框是指两个下拉框...