jsp如何实现动态下拉菜单

时间：2023-01-16 11:08:10
jsp如何实现实现动态下拉菜单? 就是类似于 省 市 区 村 街道   5级关联菜单  数据从库取
技术ajax 或者jquery都可以
如果有例子的话更好

12 个解决方案

#1

这个应该不难吧

首先要有对应的数据库。
然后把每一个下拉框的数据查出来换成xml或者text，用js去解析，动态的生成option就行了

#2



function createXMLHttpRequest(){

	var xmlHttp=false;

	try{

		xmlHttp = new XMLHttpRequest();

	}

	catch(trymicrosoft){

		try{

				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

		}//No.1

		catch(othermicrosoft){

			try{xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")}

			catch(failed){}

		}//No.1

	}

   return xmlHttp;

}

//获取select的值

function getSelect(choose){

	var result = 0;

	result = choose.options[choose.selectedIndex].value;

	return result;

}

//创建下拉列表

function createOption(cid,obj){

	var xmlHttp = createXMLHttpRequest();

	xmlHttp.open("get","/tools/area.jsp?pid="+escape(cid),true);

	xmlHttp.onreadystatechange = function(){

    	if(xmlHttp.readyState == 4&&xmlHttp.status == 200){

			var ClassStr = xmlHttp.responseText;

			if(ClassStr.length>0){

				var ClassList = ClassStr.split("\n");

				for(var i=0;i<ClassList.length-1;i++){

					var Opt = document.createElement("option"); 

					Opt.value = ClassList[i].split(",")[0];

					Opt.appendChild(document.createTextNode(ClassList[i].split(",")[1]));

					obj.appendChild(Opt);

				}

			}//end if ClassStr.length>0

		}//end if readyState

	}//eixt function

	xmlHttp.send(null);

}

//删除节点

function removeOption(obj){obj.length=1;}

//得到大类

function getClassList(obj){createOption(0,obj);}

//得到小类

function getTypeList(obj,obj2){

	var val = (Number)(getSelect(obj));

	removeOption(obj2);

	if(val!=0)

		createOption(val,obj2);

}

window.onload=function(){getClassList(document.getElementById("povince"));};

//jsp的代码你自己写吧,再加两级的原理也是一样的

#3

给你一个2个下拉框联动的例子

<html>
<head>
<title>Jack Zheng xmlhttp test</title>
<script language="javascript">
function sendData(){
  var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.Open("post", "tttt.jsp?param="+document.form1.input.value, false);//向JSP提交请求
  xmlhttp.Send();
  var xml=xmlhttp.responseText;//从JSP获取结果
  var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
  var i=0;
    xmlDoc.async=false;
    xmlDoc.resolveExternals = false;
    xmlDoc.validateOnParse = false;
    xmlDoc.loadXML(xml);
    xmlObj=xmlDoc.documentElement;
    nodes = xmlDoc.documentElement.childNodes;
    //从Select中删除项目
    for(i=0;i<document.form1.output.options.length;i++){
      document.form1.output.options[i] = null;
    }

     //向Select中添加项目
    document.form1.output.options.length = 0;
    for (i=0;i<xmlObj.childNodes.length;i++){
      values=xmlObj.childNodes(i).getAttribute("id");
      labels=xmlObj.childNodes(i).text;
      //alert(values+","+labels);
      document.form1.output.add(document.createElement("OPTION"));
      document.form1.output.options[i].text=labels;
      document.form1.output.options[i].value=values;
  
    }


  }
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="form1" method="post" action="">
  <select name="input" onchange="sendData()">
    <option value="200000030100000001">系-1</option>
    <option value="200000030100000002">系-2</option>
  </select>
  <select name="output">
  </select>
 </form>
</body>

////////tttt.jsp//////////
<%@ page contentType="text/html; charset=gb2312" import="java.sql.*,qyxx.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.*"%>
<jsp:useBean id="db" class="qyxx.connectDB" />

<%
  //获取参数
  try
  {
  String strParam=request.getParameter("param");
  ResultSet rs = null;
  String sql =  "查询语句";
  rs = db.executeQuery(sql);  
  
  String bb = null;
 StringBuffer xml = new StringBuffer();
 //xml.append("<?xml version='1.0' encoding='gb2312'?>\r\n");
  xml.append("<test>\r\n");
       while(rs.next())
   {
                 xml.append("<aa id='"+rs.getString(1)+"'>\r\n")
.append(rs.getString(2)+"\r\n")
               .append("</aa>\r\n");
     }
 xml.append("</test>");
 
 out.println(xml.toString());//输出到HTML端的JS

 }
catch(Exception e)
{
session.setAttribute("error","1");
response.sendRedirect("error.jsp");
}

%>

#4

网上一搜一大把

#5

添加的时候照上面的可以，如果修改的时候使用和添加一样的界面，就要注意了，你要清一下原来的select值，还要合理的设计载入数据，我曾经做过一个七级联动的功能，js写了2、3百行。

#6

我是2级的，没有细致到村和街道，我是从数据库一次性读出，然后再request里，js负责调度显示

但是缺点如果数据多了反应有点慢，特别网络不好的时候

下次试试AJAX数据读取

#7

学习了，帮顶一下。

#8

等回家给你个代码！！！不难的

#9

mark

#10

2楼正解

#11

dwr我用过  既然楼上那么多给你回答了 


那就学习了。。

#12

学习，不过不是我要的结果，
当我读取到数据库里面为是的时候，就显示是，然后下拉显示否，
读取到否则正好相反
我记得有个标签可以完成这个功能的，以前见到过，但是想不起来了
这个效果还不知道怎么做？？？

#1

这个应该不难吧

首先要有对应的数据库。
然后把每一个下拉框的数据查出来换成xml或者text，用js去解析，动态的生成option就行了

#2



function createXMLHttpRequest(){

	var xmlHttp=false;

	try{

		xmlHttp = new XMLHttpRequest();

	}

	catch(trymicrosoft){

		try{

				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

		}//No.1

		catch(othermicrosoft){

			try{xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")}

			catch(failed){}

		}//No.1

	}

   return xmlHttp;

}

//获取select的值

function getSelect(choose){

	var result = 0;

	result = choose.options[choose.selectedIndex].value;

	return result;

}

//创建下拉列表

function createOption(cid,obj){

	var xmlHttp = createXMLHttpRequest();

	xmlHttp.open("get","/tools/area.jsp?pid="+escape(cid),true);

	xmlHttp.onreadystatechange = function(){

    	if(xmlHttp.readyState == 4&&xmlHttp.status == 200){

			var ClassStr = xmlHttp.responseText;

			if(ClassStr.length>0){

				var ClassList = ClassStr.split("\n");

				for(var i=0;i<ClassList.length-1;i++){

					var Opt = document.createElement("option"); 

					Opt.value = ClassList[i].split(",")[0];

					Opt.appendChild(document.createTextNode(ClassList[i].split(",")[1]));

					obj.appendChild(Opt);

				}

			}//end if ClassStr.length>0

		}//end if readyState

	}//eixt function

	xmlHttp.send(null);

}

//删除节点

function removeOption(obj){obj.length=1;}

//得到大类

function getClassList(obj){createOption(0,obj);}

//得到小类

function getTypeList(obj,obj2){

	var val = (Number)(getSelect(obj));

	removeOption(obj2);

	if(val!=0)

		createOption(val,obj2);

}

window.onload=function(){getClassList(document.getElementById("povince"));};

//jsp的代码你自己写吧,再加两级的原理也是一样的

#3

给你一个2个下拉框联动的例子

<html>
<head>
<title>Jack Zheng xmlhttp test</title>
<script language="javascript">
function sendData(){
  var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.Open("post", "tttt.jsp?param="+document.form1.input.value, false);//向JSP提交请求
  xmlhttp.Send();
  var xml=xmlhttp.responseText;//从JSP获取结果
  var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
  var i=0;
    xmlDoc.async=false;
    xmlDoc.resolveExternals = false;
    xmlDoc.validateOnParse = false;
    xmlDoc.loadXML(xml);
    xmlObj=xmlDoc.documentElement;
    nodes = xmlDoc.documentElement.childNodes;
    //从Select中删除项目
    for(i=0;i<document.form1.output.options.length;i++){
      document.form1.output.options[i] = null;
    }

     //向Select中添加项目
    document.form1.output.options.length = 0;
    for (i=0;i<xmlObj.childNodes.length;i++){
      values=xmlObj.childNodes(i).getAttribute("id");
      labels=xmlObj.childNodes(i).text;
      //alert(values+","+labels);
      document.form1.output.add(document.createElement("OPTION"));
      document.form1.output.options[i].text=labels;
      document.form1.output.options[i].value=values;
  
    }


  }
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="form1" method="post" action="">
  <select name="input" onchange="sendData()">
    <option value="200000030100000001">系-1</option>
    <option value="200000030100000002">系-2</option>
  </select>
  <select name="output">
  </select>
 </form>
</body>

////////tttt.jsp//////////
<%@ page contentType="text/html; charset=gb2312" import="java.sql.*,qyxx.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.*"%>
<jsp:useBean id="db" class="qyxx.connectDB" />

<%
  //获取参数
  try
  {
  String strParam=request.getParameter("param");
  ResultSet rs = null;
  String sql =  "查询语句";
  rs = db.executeQuery(sql);  
  
  String bb = null;
 StringBuffer xml = new StringBuffer();
 //xml.append("<?xml version='1.0' encoding='gb2312'?>\r\n");
  xml.append("<test>\r\n");
       while(rs.next())
   {
                 xml.append("<aa id='"+rs.getString(1)+"'>\r\n")
.append(rs.getString(2)+"\r\n")
               .append("</aa>\r\n");
     }
 xml.append("</test>");
 
 out.println(xml.toString());//输出到HTML端的JS

 }
catch(Exception e)
{
session.setAttribute("error","1");
response.sendRedirect("error.jsp");
}

%>

#4

网上一搜一大把

#5

添加的时候照上面的可以，如果修改的时候使用和添加一样的界面，就要注意了，你要清一下原来的select值，还要合理的设计载入数据，我曾经做过一个七级联动的功能，js写了2、3百行。

#6

我是2级的，没有细致到村和街道，我是从数据库一次性读出，然后再request里，js负责调度显示

但是缺点如果数据多了反应有点慢，特别网络不好的时候

下次试试AJAX数据读取

#7

学习了，帮顶一下。

#8

等回家给你个代码！！！不难的

#9

mark

#10

2楼正解

#11

dwr我用过  既然楼上那么多给你回答了 


那就学习了。。

#12

学习，不过不是我要的结果，
当我读取到数据库里面为是的时候，就显示是，然后下拉显示否，
读取到否则正好相反
我记得有个标签可以完成这个功能的，以前见到过，但是想不起来了
这个效果还不知道怎么做？？？
标签：

相关文章