9月8日,看到网站上有人在写用js来写二级菜单,可是都没有放在jsp中,所以本人就在jsp中写了一个例子,作为参考
,同时对于下拉菜单,必须要知道下拉菜单的js基本操作。
JavaScript对下拉菜单的基本操作:
1.获取一个下拉菜单对象
var select = document.getElementById("selectid");
2.在下拉菜单中添加一个选项
var option = new Option("value","text");//第一项为值,第二项为文本域
3.把选项加入到下拉菜单中
select.options.add(option);
4.获取被选择的选项的索引
var index = select.selectedIndex;
5.获得某个选项的文本域
var text = select.options[index].text;
6.获得某个选项的值域
var value = select.options[index].value;
7.获得选中的值
var value = select.vlaue;
以下为实现下拉菜单联动的jsp上的代码
<%@ 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 οnlοad="Select()"> <select id="type" name="type" οnchange="Select2()" > <option value="">--请选择--</option></select> <select id="type" name="type" > <option value="">--请选择--</option></select> </body> <html>
在用jsp写动态的下拉菜单时,只能把这部分的代码写在当前的jsp页面,这样也限制的js代码的复用。