怎样从数据库中检索，实现三级联动下拉菜单

lianxiangpanjin5 2006-02-23 09:11:05

如上题

...全文

526 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

hy98521 2006-02-23

打赏
举报

javascript 啊。好头痛的

hch686 2006-02-23

打赏
举报

阿信的菜单：
index.htm
-----------------
<%@language="javascript"%>
<html>
<head>
<title> 多级关联菜单 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="fason,阿信,蒲佛信">
<meta name="Keywords" content="下拉菜单,关联,多级,fason,阿信,蒲佛信">
<meta name="Description" content="此程序为简单的可无限级数的关联下拉菜单，有问题请往fason_pfx@hotmail.com发信">
<style>
body,select
{
font-size:9pt;
font-family:Verdana;
}
select {background-color:#F0F0F0;}
</style>
<script language="JavaScript" src="script/xselect.js"></script>
<script language="JavaScript" src="data.asp"></script>
<SCRIPT LANGUAGE = JavaScript>

</SCRIPT>
</head>
<body bgcolor="#E0E0E0">
多级关联菜单：
<select name="s1"><option>请选择</option></select>
<select name="s2"><option>请选择</option></select>
<select name="s3"><option>请选择</option></select>

</body>
</html>

---------------------
data.asp
----------------
<%@language="javascript"%>
var dsy = new ActiveXObject("scripting.dictionary");
<%
//** Power By Fason
//** Email:fason_pfx@hotmail.com
var strDBName = "database/data.mdb";
var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="+Server.Mappath(strDBName)
var dbConn = Server.CreateObject("adodb.connection");
dbConn.Open(strConn);
var ResponseHTML="";
function List(key,id)
{
var dbCmd=Server.CreateObject("adodb.command");
with(dbCmd){
ActiveConnection = dbConn;
CommandType = 4;
CommandText = "sp_select";
var objRs=Execute(null,(id?id:0));
}
var tmp=[String(key),[]];
var x=0;
while(!objRs.eof)
{
tmp[1][tmp[1].length]=String(objRs("description"));
if(objRs("children")>0)
{
List(key+"_"+(x++),String(objRs("id")));
}
objRs.movenext;
}
dbCmd=null;
objRs=null;
ResponseHTML=("dsy.add(\""+tmp[0]+"\",\""+tmp[1].join("|")+"\");\n")+ResponseHTML;
}
List(0);
dbConn.Close();
dbConn=null;
Response.Write(ResponseHTML);
%>
----------
xselect.js
-------------
function change(v){
var str="0";
for(i=0;i<v;i++){ str+=("_"+document.all(s[i]).selectedIndex);};
var ss=document.all(s[v]);
with(ss){
length = 0;
if(dsy.Exists(str)){
ar = dsy(str).split("|");
for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]);
}
else { options[0]=new Option("请选择","请选择");}
if(++v<s.length){onchange=new Function("change("+v+")");onchange();}
}
}
window.attachEvent("onload",function(){ change(0);});
------------------------------------------------------

DarkW 2006-02-23

打赏
举报

我刚做过2级的！改N级都行！反正是JS代码你看一下 www.zsbaj.com 的源文件就行了！

mysqlaping 2006-02-23

打赏
举报

1，生成数组，再调用
2，ajax
1范例
<script language="javascript">
BigIndexArray = new Array();
BigNameArray = new Array();
BigWhichAreaArray = new Array();
<%
sql = "select * from BigClass"
set rs1 = conn.execute(sql)
i = 0
do while not rs1.eof and not rs1.bof
%>
BigNameArray[<%=i%>] = '<%=rs1("BigName")%>';
BigWhichAreaArray[<%=i%>] = '<%=rs1("WhichArea")%>';
BigIndexArray[<%=i%>] = '<%=rs1("BigIndexNO")%>';
<%
i = i + 1
rs1.movenext
loop
%>
///////////////////////////////////////////////////////////////
SubIndexArray = new Array();
SubNameArray = new Array();
SubBigIndexArray = new Array();
<%
sql = "select * from SubClass"
set rs2 = conn.execute(sql)
i = 0
do while not rs2.eof and not rs2.bof
%>
SubNameArray[<%=i%>] = '<%=rs2("SubName")%>';
SubIndexArray[<%=i%>] = '<%=rs2("SubIndexNO")%>';
SubBigIndexArray[<%=i%>] = '<%=rs2("BigIndexNO")%>';
<%
i = i + 1
rs2.movenext
loop
%>
//////////////////////////////////////////////////////////////
XiLieIndexArray = new Array();
XiLieNameArray = new Array();
XiLieSubIndexArray = new Array();
XiLieBigIndexArray = new Array();
<%
sql = "select * from XiLieClass"
set rs3 = conn.execute(sql)
i = 0
do while not rs3.eof and not rs3.bof
%>
XiLieNameArray[<%=i%>] = '<%=rs3("XiLieName")%>';
XiLieIndexArray[<%=i%>] = '<%=rs3("XiLieIndexNO")%>';
XiLieBigIndexArray[<%=i%>] = '<%=rs3("BigIndexNO")%>';
XiLieSubIndexArray[<%=i%>] = '<%=rs3("SubIndexNO")%>';
<%
i = i + 1
rs3.movenext
loop
%>
///////////////////////////////////////////////////////////////////
//处理函数
//初始化大类品牌

//alert(document.form1.radiobutton.checked.value);
var Bselect = "<select name=BPinPai onChange=GetSubClass(this.form)>";
Bselect = Bselect + "<option>====</option>";
for(j=0;j<BigWhichAreaArray.length;j++)
{
for(k=0;k<form1.radiobutton.length;k++)
{
if(form1.radiobutton[k].checked)
{
if (BigWhichAreaArray[j]==form1.radiobutton[k].value)
{
Bselect = Bselect + "<option value="+BigIndexArray[j]+">"+BigNameArray[j]+"</option>";
}
}

}

}
Bselect = Bselect + "</select>";
document.getElementById('BigPinPai').innerHTML = Bselect;
//取得具体品牌
function GetSubClass(form)
{
var Sselect = "<select name=PinPai onChange=GetXiLieClass(this.form)>";
Sselect = Sselect + "<option>====</option>";
for(k=0;k<SubIndexArray.length;k++)
{
if(SubBigIndexArray[k]==form.BPinPai.options[form.BPinPai.selectedIndex].value)
{
Sselect = Sselect + "<option value=" + SubIndexArray[k] + ">" + SubNameArray[k] + "</option>";
}

}
Sselect = Sselect + "</select>";
document.getElementById('SubPinPai').innerHTML = Sselect;
}
//GetSubClass('A1');
//取得系列
function GetXiLieClass(form)
{
var Xselect = "<select name=XiLie>";
Xselect = Xselect + "<option>====</option>";
for(k=0;k<XiLieSubIndexArray.length;k++)
{
if(XiLieSubIndexArray[k]==form.PinPai.options[form.PinPai.selectedIndex].value)
{
Xselect = Xselect + "<option value=" + XiLieIndexArray[k] + ">" + XiLieNameArray[k] + "</option>";
}

}
Xselect = Xselect + "</select>";
document.getElementById('XL').innerHTML = Xselect;
}
//取得大类类型数据
function GetTypeOfBig()
{

var BBselect = "<select name=BPinPai onChange=GetSubClass(this.form)>";
BBselect = BBselect + "<option>====</option>";
for(j=0;j<BigWhichAreaArray.length;j++)
{
for(k=0;k<form1.radiobutton.length;k++)
{
if(form1.radiobutton[k].checked)
{
if (BigWhichAreaArray[j]==form1.radiobutton[k].value)
{
//alert('d');
BBselect = BBselect + "<option value="+BigIndexArray[j]+">"+BigNameArray[j]+"</option>";
}
}

}

}
BBselect = BBselect + "</select>";
document.getElementById('BigPinPai').innerHTML = BBselect;
document.getElementById('SubPinPai').innerHTML = "<select name=PinPai onChange=GetXiLieClass(this.form)><option>====</option></select>";
document.getElementById('XL').innerHTML = "<select name=XiLie><option>====</option></select>";
}
//初始化大类下具体品牌
//var Sselect = "<select name=PinPai>";
//for(j=0;j<SubIndexArray.length;j++)
//{
//if (SubBigIndexArray[j]==document.form1.PinPai.options[1].value)
// {
//Sselect = Sselect + "<option value="+SubIndexArray[j]+">"+SubNameArray[j]+"</option>";
//}

//}
//Sselect = Sselect + "</select>";
//document.getElementById('SubPinPai').innerHTML = Sselect;
//初始化具体品牌下系列
</script>
2，贴出一些原理
1.jsp
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function userCheck() {
var f = document.form1;
var username = f.username.value;
if(username=="") {
window.alert("用户名不能为空。");
f.username.focus();
return false;
}
else {
send_request('sample1_2.jsp?username='+username);
}
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<form name="form1" action="" method="post">
用户名：<input type="text" name="username" value="">
<input type="button" name="check" value="唯一性检查" onClick="userCheck()">
<input type="submit" name="submit" value="提交">
</form>

</body>
</html>
-------------------------------------------------------------------------
2.jsp
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%
String username = request.getParameter("username");
if("educhina".equals(username)) out.print("用户名已经被注册，请更换一个用户名。");
else out.print("用户名尚未被使用，您可以继续。");
%>

sungcong 2006-02-23

打赏
举报

可以先生成数组，再在客户端生成联动菜单

KimSoft 2006-02-23

打赏
举报

http://community.csdn.net/Expert/topic/4559/4559209.xml?temp=.238125

lianxiangpanjin5 2006-02-23

打赏
举报

我搜索的都是用javascript方法，都不能从数据库动态实现，我正在看你给的不知道能不能实现我要的功能

tigerwen01 2006-02-23

打赏
举报

<SCRIPT LANGUAGE="javascript">

</script>
<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value=0 SELECTED>[SELECT]</option>
<option value=1>Land</option>
<option value=2>Sea</option>
<option value=3>Air</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>

-------------------
楼主可以自己改成动态

cow8063 2006-02-23

打赏
举报

楼主要学会搜索呀...............

http://community.csdn.net/Expert/topic/4557/4557193.xml?temp=.910763
http://community.csdn.net/Expert/topic/4568/4568064.xml?temp=9.612674E-02

在搜索那里输入联动

piperzero 2006-02-23