`
yingjinsheng
  • 浏览: 25799 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
文章分类
社区版块
存档分类
最新评论

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

阅读更多

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
分享到:
评论
1 楼 cloudgamer 2008-10-17  

相关推荐

    JSP+JavaScript二级级联下拉菜单

    在使用JSP JavaScript过程中有很多的技巧与实现,那么如何构建二级级联下拉菜单呢,本文将会向你做一个源码上的介绍。

    jsp+ajax 三级联动菜单

    【jsp+ajax 三级联动菜单】是一个典型的Web开发技术应用场景,它主要利用JavaServer Pages(JSP)和Asynchronous JavaScript and XML(AJAX)来实现动态网页中的数据交互和页面更新。在这个例子中,我们看到的是一个...

    全国三级联动下拉菜单

    全国三级联动下拉菜单是一种常见的前端交互设计,广泛应用于网站和应用程序中,特别是在需要用户选择地理位置或进行分类筛选时。这种设计通常包括三个层次:省份、城市和区域,以递进的方式提供选择,用户每选择一个...

    用ajax实现的jsp二级联动下拉列表

    在网页开发中,二级联动下拉列表是一种常见的交互设计,尤其在处理层级关系的数据时,如省份-...总之,通过AJAX和JSP的结合,我们可以构建一个流畅、高效且用户友好的二级联动下拉列表,极大地提升了网页的交互体验。

    纯JSP+DWR实现三级联动下拉选择菜单 实现无刷新联动 DWR判断用户是否存在 ajax二级联动菜单 DWR操作数据库模拟实现Google搜索效果

    本示例主要展示了如何使用纯JSP和Direct Web Remoting (DWR)技术来构建一个功能丰富的用户界面,其中包括三级联动下拉选择菜单、无刷新联动、用户存在性判断以及模拟Google搜索效果的功能。DWR是一种JavaScript库,...

    Ajax实现的三级联动下拉菜单

    struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp

    jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.docx

    本文将详细介绍如何利用JSP技术结合数据库查询,实现二级联动菜单的具体步骤和技巧。 #### 二、准备工作 在开始之前,我们需要准备以下几个部分: - **数据库设计**:确保数据库中有用于提供下拉选项的数据表。 - *...

    struts2地市、县区二级联动下拉菜单 doubleselect标签

    在开发过程中,经常需要处理各种表单元素,其中二级联动下拉菜单是一个常见的需求,它用于展示层次结构的数据,如省份和城市,或者部门和员工等。在Struts2中,`doubleselect`标签就是为了解决这类问题而设计的。 `...

    纯jsp实现3级联动菜单

    在3级联动菜单中,当用户在第一级菜单中做出选择时,我们可以用Ajax请求第二级菜单的数据,依此类推。 6. JSON:Ajax请求通常返回JSON格式的数据,因为JSON易于解析且传输效率高。服务器端可以将菜单数据转化为JSON...

    JSP联动下拉菜单-易明白

    这种联动下拉菜单的实现方式展示了JavaScript动态修改DOM元素的能力,以及在JSP中如何结合HTML、CSS和JavaScript实现前端交互功能。在实际项目中,可以进一步优化代码,比如使用Ajax异步加载数据,提高用户体验,...

    二级联动菜单(jsp mysql)

    在这个“二级联动菜单(jsp mysql)”的实例中,我们将探讨如何使用JavaServer Pages (JSP) 和 MySQL数据库来实现这种功能。 首先,JSP是Java的一种动态网页技术,它允许开发人员在HTML页面中嵌入Java代码,从而...

    Ajax二级联动下拉列表框

    ### Ajax 实现二级联动下拉列表框 #### 一、简介 在Web开发中,有时我们需要根据用户在第一个下拉列表中的选择动态地更新第二个下拉列表的内容。这种功能被称为“二级联动”,常用于地址选择(如省份和城市的选择)...

    实现jsp页面二级下拉框联动,实时读取数据库数据

    通过以上步骤,我们可以实现一个功能完备的JSP页面二级下拉框联动,同时实时从数据库获取数据。这个过程涉及到前后端的交互、数据库操作、事件监听和DOM操作等多个技术环节,是Web开发中一个典型的实例。理解并掌握...

    jsp+js实现的二级联动菜单.pdf

    首先,二级联动菜单通常由两个下拉列表组成:一个是一级分类,另一个是二级分类。当用户在一级分类中选择一个选项时,二级分类的选项会相应地更新,展示与所选一级分类相关的二级分类。 在传统的实现方式中,会选择...

    jsp二级联动

    在IT行业中,"jsp二级联动"是一个常见的网页交互功能,主要应用于下拉菜单或者选择框之间数据的联动更新。这个实例通常涉及到前端的HTML、CSS,以及后端的Java JSP技术,配合数据库来实现动态的数据交互。下面将详细...

    下拉框二级联动

    本文将详细讨论“下拉框二级联动”这一主题,以及如何利用AJAX和JSON技术来实现这一功能。 首先,我们要理解什么是二级联动。在多级选择的场景下,二级联动指的是当用户在一个下拉框(Dropdown)中做出选择时,第二...

    js+jsp三级联动 源码

    在IT行业中,"js+jsp三级联动 源码"是一个常见的前端与后端交互的实践案例,主要用于实现用户界面的动态筛选和过滤。这里,我们主要探讨的是使用JavaScript(js)和JavaServer Pages(jsp)来创建一个具有三级联动...

    ajax四级联动菜单

    在这个示例中,它使用了Oracle数据库存储四级菜单的数据,并结合JSP(JavaServer Pages)进行后台处理。下面将详细介绍这个系统的工作原理和关键知识点。 首先,数据库设计是整个系统的基石。这里使用了四张表来...

    超简单的ajax+jsp实现2级联动!!

    在网页开发中,二级联动是一种常见的交互设计,通常用于下拉菜单或选择框,使得用户在选择一级选项后,二级选项会动态更新以提供相关的子选项。在这个"超简单的ajax+jsp实现2级联动"的例子中,我们将探讨如何利用...

    JSP+Ajax二级联动实例

    在Web开发中,二级联动是一种常见的交互设计,用于实现下拉菜单之间数据的关联和筛选。例如,在一个地区选择的场景中,一级下拉框显示国家,选择国家后,二级下拉框动态加载对应的省份。这种功能可以提高用户体验,...

Global site tag (gtag.js) - Google Analytics