请问二级联动下拉菜单要怎么实现

lvxiao1980 2008-09-03 03:14:06

刚做web开发不久，好多东西都再摸索，不知道是不是这么称呼的，要实现的效果是这样的：
从数据库中取数据集生成下拉菜单，有两个，一个单位id+单位name，一个姓名id+姓名name，人员属于一个单位，都是从数据库中取的，要求第一个下拉菜单选择不同的单位，第二个下拉菜单中的人员会随之改变。
第一个下拉菜单用单位id做value，单位name做显示名称，第二个下拉菜单用姓名id做value，姓名name做显示名称。
大概就是这个意思吧，因为人员很多，所以这样显示更方便查看。

...全文

97 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

Little_qd 2008-09-03

打赏
举报

思路
一级菜单onchange调用ajax,根据一级菜单的值取相应数据
清二级菜单,根据取出的数据填充二级菜单

有N多这种例子
有的框架本身就支持这种联动

liuheworld 2008-09-03

打赏
举报

Select.jsp

<script language=javaScript>



function changeSelect(id){

	

	var root ;

	xml = new ActiveXObject("Msxml.DOMDocument");

    xml.async = false;

    xml.load("data.jsp?id="+id);

    

    root=xml.documentElement;

	var opValue="";

	var opText ="";

	var formname = eval(document.form1).user ;

	formname.options.length = 0;

	formname[formname.options.length]=  new Option("--请选择--","-1");

      for(var i=0 ;i< root.childNodes.length ;i++){

        opValue = root.childNodes(i).attributes.getNamedItem("value").nodeValue;

        opText = root.childNodes(i).attributes.getNamedItem("text").nodeValue;

       formname.options[formname.options.length]=new Option(opText,opValue);

      }	    

      

      }

     

</script>

 

<form action="" name="form1">



<select id="class1" name="class1" onchange="changeSelect(this.options.value)">

	<option value="1">单位1</option>

	<option value="2">单位2</option>

	<option value="3">单位3</option>

</select>      



<select id="user" name="user"></select>

</form>

  </body>

</html>

data.jsp

<%@ page language="java" pageEncoding="GB18030"%>

<?xml version="1.0" encoding="GB2312"?>

<%

	out.println("<select>"); // select 标签开始

	//*********************//

	// 

	//数据库连接代码

	//String para = request.getParameter("id");

	//String sql = "select id,name from table list where class_id = "+para ;

	// 运行sql

	//ResultSet rs = null;

	//StringBuffer sb = new StringBuffer();

	//while(rs.next()){

	//	sb.append("<op value=\""+rs.getString("id")+"\" text=\""+rs.getString("id")+"\"/>");

	//}

	

	//out.print(sb.toString());

	

	//*************************//

	// 由于没有连接数据库，下面直接用结果测试

	out.print("<op value=\"1\" text=\"123\"/>");

	out.print("<op value=\"1\" text=\"123\"/>");

	out.println("</select>"); // select 标签结束

	

	//**********************

	//实际上应该输出的xml文件应该是

	//<?xml version="1.0" encoding="GBK" ?>

	//<select>

	//	<L1 Value="1" Text="123"/>

	//	<L1 Value="2" Text="234"/>

	//</select>

	//************************

%>