jsp和JavaScript的二级联动下拉菜单的实现 -

yingjinsheng

浏览: 25794 次
性别:
来自: 宁波

最近访客更多访客>>

hzjdwb

liangge5211

dengmiao

xmy0906

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (6)

社区版块

存档分类

jsp和JavaScript的二级联动下拉菜单的实现

JSP JavaScript J#XHTML Bean

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 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代码的复用。

5
顶

0
踩

分享到：