用JSP+JavaScript打造二级级联下拉菜单
JavaScript对下拉菜单的基本操作：
1.获取一个下拉菜单对象
Js代码
var select = document.getElementById("selectid");
2.在下拉菜单中添加一个选项
Js代码
var option = new Option("value","text");//第一项为值，第二项为文本域
3.把选项加入到下拉菜单中
Js代码
select.options.add(option);
4.获取被选择的选项的索引
Js代码
var index = select.selectedIndex;
5.获得某个选项的文本域
Js代码
var text = select.options[index].text;
6.获得某个选项的值域
Js代码
var value = select.options[index].value;
7.获得选中的值
Js代码
var value = select.vlaue;
以下为实现下拉菜单联动的jsp上的代码
Js代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>二级联动下拉菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
//这里jsp调用了bean用来从数据库读出用户需要的内容，并已string类型
//放在list中
<%
Type type = new Type(1);
List select1 = traintype.getSelectFirst();
List select2 = traintype.getSelectSecond();
%>
<script type="text/javascript" language="javascript">
//二级联动菜单
function Select1()
{
//动态生成js数组
var arry1 = new Array(
<%
for(int i=0;i<select1.size();i++)
{
if(i<select1.size()-1)
out.print("\""+select1.get(i)+"\",");
else out.print("\""+select1.get(i)+"\"");
}%>);
var type = document.getElementById("type");
for(var i=0;i<arry1.length;i++)
{
var op = new Option(arry1[i],arry1[i]);
type.options.add(op);
}
}
function Select2()
{
var arry2 = new Array();
<% for(int j=0;j<select2.size();j++)
{
List templist = (List)select2.get(j);
%>
arry2[<%=j%>]=new Array(
<%for(int k=0;k<templist.size();k++)
{
if(k<templist.size()-1)
out.print("\""+templist.get(k)+"\",");
else out.print("\""+templist.get(k)+"\"");
}%>);
<%
}
%>
var type = document.getElementById("type");
var id = traintype.selectedIndex-1;
var name = document.getElementById("name");
name.innerHTML="";
var top = new Option("--请选择--","");
orgname.options.add(top);
var temparry = arry2[id];
for(var i=0;i<temparry.length;i++)
{
var op = new Option(temparry[i],temparry[i]);
orgname.options.add(op);
}
}
<body onload="Select()">
<select id="type" name="type" onchange="Select2()" >
<option value="">--请选择--</option></select>
<select id="type" name="type" >
<option value="">--请选择--</option></select>
</body>
<html>
在用jsp写动态的下拉菜单时，只能把这部分的代码写在当前的jsp页面，这样也限制的js代码的复用。
