三阶（三级）联动下拉选单_ASP教程_编程技术
首先先 我 看看 下拉式 (三 ) 的原始程式,等你看懂了之後咱 再利用 ASP 和 SQL 生 下拉式 (三 ):
下拉式 (三 ):
表 名 myForm
第一 下拉式 名 color
色:
色"> 色
色"> 色
色"> 色
第二 下拉式 名 fruit
水果:
果
李子
第三 下拉式 名 price
格:
10元
20元
30元
定 色下拉式 一 一 列,且 列 度 三(表示有三 色)
key=new Array(3);
//定 色下拉式 中第一 色 一 一 列,且 列 度 三(表示有三 水果),以下依此 推
key[0]=new Array(3);
key[1]=new Array(2);
key[2]=new Array(3);
// 重 定 一 列是 了在指定水果下拉式 中之水果名 已 把水果名
//指定 相 的 列索引, 些 列索引 法被重 定 成 列, 了要 格下拉式
// 能沿用之前所定 的 列值,所以我 在此 另外再定 一 一模一 的 列索引。
key1=new Array(3);
key1[0]=new Array(3);
key1[1]=new Array(2);
key1[2]=new Array(3);
//定 水果下拉式 中第一 水果 一 一 列,且 列 度 三(表示有三
// 格),此水果是 於 色下拉式 中之第一 色,以下依此 推
key1[0][0]=new Array(3);
key1[0][1]=new Array(3);
key1[0][2]=new Array(3);
//定 水果下拉式 中第一 水果 一 一 列,且 列 度 三(表示有三
// 格),此水果是 於 色下拉式 中之第二 色,以下依此 推
key1[1][0]=new Array(3);
key1[1][1]=new Array(3);
//定 水果下拉式 中第一 水果 一 一 列,且 列 度 三(表示有三
// 格),此水果是 於 色下拉式 中之第三 色,以下依此 推
key1[2][0]=new Array(3);
key1[2][1]=new Array(3);
key1[2][2]=new Array(3);
//指定水果下拉式 中之水果名
// 色
key[0][0]=" 果";
key[0][1]=" ";
key[0][2]="李子";
// 色
key[1][0]="柳丁";
key[1][1]="葡萄柚";
// 色
key[2][0]="芭 ";
key[2][1]="西瓜";
key[2][2]=" 子";
//指定 格下拉式 中各 水果的 格
// 果
key1[0][0][0]="10元"
key1[0][0][1]="20元"
key1[0][0][2]="30元"
//
key1[0][1][0]="40元"
key1[0][1][1]="50元"
key1[0][1][2]="60元"
//李子
key1[0][2][0]="70元"
key1[0][2][1]="80元"
key1[0][2][2]="90元"
//柳丁
key1[1][0][0]="100元"
key1[1][0][1]="110元"
key1[1][0][2]="120元"
//葡萄柚
key1[1][1][0]="130元"
key1[1][1][1]="140元"
key1[1][1][2]="150元"
//芭
key1[2][0][0]="160元"
key1[2][0][1]="170元"
key1[2][0][2]="180元"
//西瓜
key1[2][1][0]="190元"
key1[2][1][1]="200元"
key1[2][1][2]="210元"
// 子
key1[2][2][0]="220元"
key1[2][2][1]="230元"
key1[2][2][2]="240元"
//改 色下拉式 之 值 , Buildkey 函 , 色下拉式 中之
// 索引值 num ,以本 例而言, 色 0 的索引值, 色 1 的索引
//值, 色 2 的索引值
function Buildkey(num)
{
// 水果下拉式 之指 索引指定 0。
document.myForm.fruit.selectedIndex=0;
//由於改 水果下拉式 , 格下拉式 也必 跟著 ,所以我 在此 便呼
//叫 Buildkey1函 , 迫 格下拉式 中之 索引值 0 ,表示不管目前是何
// 色的水果, 格下拉式 都 呈 此水果的第一 格
Buildkey1(0);
// 是最 的步 ,在 JavaScript 中,for(ctr=0;ctr//[color=#0000ff]就等於 VBScript 中的 For ctr = 0 to key[num].length,若有不懂的地方建 大
//家 一本 JavaScript 的 看, 例 明底下的程式大家 比 清楚, 我
// 了 色之後,此 num=0 (前面已 了),此 key[0]的 列 度我 可以透
//先前定 得知, key[0].length=3,而水果下拉式 始改 ,水果下拉式 中
//第一 成key[0][0],也就是 果,水果下拉式 中第二 成key
//[0][1],也就是 ,水果下拉式 中第三 成key[0][2],也就是李子,
//大家 了解了吧!!
for(ctr=0;ctr key[0].length指定 目前水果下拉式 之索引 列 度。
document.myForm.fruit.length=key[num].length;
}
function Buildkey1(num)
{
// 格下拉式 之指 索引指定 0。
document.myForm.price.selectedIndex=0;
//改 格下拉式 的 除了跟水果下拉式 相 之外, 跟目前所 色有
// 例 明底下的程式大家 比 清楚, 我 了 色之後,此
//document.myForm.color.selectedIndex=0 (因 色是 色下拉式 中之第
//一 指 索引值),如果我 在水果下拉式 中 的水果是 ,此 num=1 ,而
//key1[document.myForm.color.selectedIndex][num].length 此 成 key1
//[0][1].length, 之前的定 可以知道 值是3,而 格下拉式 始改 , 格//下拉式 中第一 成key[0][1][0],也就是40 元, 格下拉式 中第二
// 成key[0][1][1],也就是50 元,水果下拉式 中第三 成key
//[0][1][2],也就是60 元, 大家 了解了吧!!
for(ctr=0;ctr由 色下拉式 索引取得水果 列值;
document.myForm.cost.options[ctr]=new Option(key1[document.myForm.color.selectedIndex][num][ctr],key1[document.myForm.color.selectedIndex][num][ctr]);
}
}
//-->
上面的程式希望大家用 值 去的方式 ,我想 比 好 ,若有任何看不懂的地方可以直接留言告 我,接下 我 始利用 ASP SQL 生上面那段程式,希望大家不要因 上面的程式看不太懂而退 ,因 底下的程式 更 ,如果大家能 整 流程吸收,我相信不管是 下拉式 (四 )或 下拉式 (五 )都 不倒你了,之所以 用上面的方式 建立下拉式 是因 者 得 例 然比 麻 ,但是 是比 容易理解的,另外 方式 者 得可能 出 之後 不好解 所以作 !!
在 入 作之前,先 我 建立三 料表,一 是 color 料表,一 是 fruit 料表,一 是 price 料表, 料表架 如下:
三 料表 容分 如下所示:
大家可以看的到 fruit 料表是以 COLORID 位 color 料表形成 ,而 price 料表又以 FRUITID 位 fruit 料表形成 ,我 想要 料是以下面的方式 呈 如何做呢?
色→ 果→10元
色→ 果→20元
色→ 果→30元
色→ →40元
色→ →50元
色→ →60元
色→李子→70元
色→李子→80元
色→李子→90元
色→柳丁→100元
色→柳丁→110元
色→柳丁→120元
色→葡萄柚→130元
色→葡萄柚→140元
色→葡萄柚→150元
色→芭 →160元
色→芭 →170元
色→芭 →180元
色→西瓜→190元
色→西瓜→200元
色→西瓜→210元
色→ 子→220元
色→ 子→230元
色→ 子→240元
我 用 JOIN 的方式 三 料表 起 , JOIN 的 是把 fruit 料表中 COLORID 位值等於 color 料表中 ID 位的 料且 price 料表中 FRUITID 位值等於 fruit 料表中 ID 位的 料 JOIN 起 。
<%
myDSN="Provider=SQLOLEDB; Data Source=Jackal; Initial Catalog=pubs; User ID=sa; Password="
strSQL="select color.color, fruit.fruit, price.cost from color join fruit on color.ID=fruit.COLORID join price on price.FRUITID=fruit.ID order by color.ID"
Set my_conn = Server.CreateObject("ADODB.Connection")
my_conn.open myDSN
set rs=my_conn.execute(strSQL)
DO UNTIL rs.eof
Response.Write rs(0) & "→" & rs(1) & "→" & rs(2) & "<br>"
rs.movenext
LOOP
rs.close
set rs=nothing
my_conn.close
set my_conn=nothing
%>
就上面的 料架 而言我 可以很清楚了看到, 色→ 果→10元相 於是 key1[0][0][0] 列索引的值,而 色→ 子→240元就相 於是 key1[2][2][2] 列索引的值,而 色→ 果也相 於是 key[0][0] 列索引的值, 注意一 是 key ,一 是 key1,也就是我 在文章一 始告 你 何要定 列值的原因, OK ,看了 料的架 之後最麻 的事情 了,要如何把 的 料架 成 列,而且 要和 料 作 合呢?底下 一段程式可能有 ,不 我 量解 清楚:
DynamicSelectBox.asp
ByRef。 直接 看底下副程式的部分
myDSN="Provider=SQLOLEDB; Data Source=Jackal; Initial Catalog=pubs; User ID=sa; Password="
strSQL="select color.color, fruit.fruit, price.cost from color join fruit on color.ID=fruit.COLORID join price on price.FRUITID=fruit.ID order by color.ID"
call listmaker(myDSN, strSQL, colorlist,"color", fruitlist ,"fruit", pricelist, "price", pubevent, pubfun, "myForm")
%>
色:
水果:
格:
-->
"
'利用 fruitlist 字串 建立第二 下拉式 的 Html 原始 。
fruitlist=""
'利用 pricelist 字串 建立第三 下拉式 的 Html 原始 。
pricelist=""
'在 初始某些 值, 作底下 行 算 之旗 值。
loopcounter=0
lastvalue=rs(0)
lastvalue2=rs(1)
redim tempArray(1)
'thisgroupcount 代表某 色共有 水果
thisgroupcount=0
'thissubgroupcount 代表某 水果共有 格, 水果 thissubgroupcount 零, 重新
'累加。
thissubgroupcount=0
'howmanygroups 代表共有 色
howmanygroups=0
'howmanysubgroups 代表共有 水果, 色 howmanysubgroups 零, 重新
'累加。
howmanysubgroups=0
DO UNTIL rs.eof
thisvalue=rs(0)
thisvalue2=rs(1)
thisvalue3=rs(2)
'如果 水果名 改 ,而且目前水果是某 色的第一 水果 ,譬如: 色→ 果
'或: 色→柳丁 就在 Script 中加上 色 ( 了 大家更容易 Script 隔
' ),然後再 水果名 定 到 key 列值,
'接著再定 key1[第 色][第 水果] 之 列 度。
if thisvalue2lastvalue2 then
If howmanysubgroups=0 then
tempSTR1=tempSTR1 & "// " & lastvalue & vbcrlf
tempSTR2=tempSTR2 & "// " & lastvalue & vbcrlf
end If
tempSTR2=tempSTR2 & "key1[" & howmanygroups & "][" & howmanysubgroups &
"]=new Array(" & thissubgroupcount & ");" & vbcrlf
tempSTR1=tempSTR1 & "key[" & howmanygroups & "][" & howmanysubgroups &
"]=""" & lastvalue2 & """;" & vbCRLF
howmanysubgroups=howmanysubgroups+1
thissubgroupcount=0
lastvalue2=thisvalue2
end if
' 行 果如下
// 色
key[0][0]=" 果";
key[0][1]=" ";
key[0][2]="李子";
// 色
key[1][0]="柳丁";
key[1][1]="葡萄柚";
// 色
key[2][0]="芭 ";
key[2][1]="西瓜";
key[2][2]=" 子";
// 色
key1[0][0]=new Array(3);
key1[0][1]=new Array(3);
key1[0][2]=new Array(3);
// 色
key1[1][0]=new Array(3);
key1[1][1]=new Array(3);
// 色
key1[2][0]=new Array(3);
key1[2][1]=new Array(3);
key1[2][2]=new Array(3);
'如果 色名 改 ,就定 key[第 色] 列值,
'接著再定 key1[第 色] 之 列 度,重 定 的原因在之前已跟大家 了,然
'後 howmanygroups ( 色 ) 值加一, 水果 值 (thisgroupcount) 零
if thisvaluelastvalue then
tempSTR=tempSTR & "key[" & howmanygroups & "]=new Array(" & howmanysubgroups & ");" & _
vbcrlf
tempSTR=tempSTR & "key1[" & howmanygroups & "]=new Array(" & howmanysubgroups & ");" & _
vbcrlf
thisgroupcount=0
howmanygroups=howmanygroups+1
howmanysubgroups=0
end if
' 行 果如下
key=new Array(3);
key1=new Array(3);
key[0]=new Array(3);
key1[0]=new Array(3);
key[1]=new Array(2);
key1[1]=new Array(2);
key[2]=new Array(3);
key1[2]=new Array(3)
'如果 thisgroupcount=0 代表目前 色改 ,此 色名 到 color 下拉式 中
if thisgroupcount=0 then
colorlist =colorlist & "" & thisvalue & "" & vbcrlf
end if
'如果 thissubgroupcount=0 代表目前水果改 ,此 在key1[第 色][第 水果][第
' 格] 列值前加上水果名 , 大家更容易 水果名 格 隔 。
if thissubgroupcount=0 then
tempSTR3=tempSTR3 & "// " & lastvalue2 & vbcrlf
end if
'定 key1[第 色][第 水果][第 格] 列值。
tempSTR3=TempSTR3 & "key1[" & howmanygroups & "][" & howmanysubgroups & "][" & thissubgroupcount & "]=""" & thisvalue3 & """;" & vbCRLF
' 行 果:
// 果
key1[0][0][0]="10元";
key1[0][0][1]="20元";
key1[0][0][2]="30元";
//
key1[0][1][0]="40元";
key1[0][1][1]="50元";
key1[0][1][2]="60元";
// 李子
key1[0][2][0]="70元";
key1[0][2][1]="80元";
key1[0][2][2]="90元";
// 柳丁
key1[1][0][0]="100元";
key1[1][0][1]="110元";
key1[1][0][2]="120元";
// 葡萄柚
key1[1][1][0]="130元";
key1[1][1][1]="140元";
key1[1][1][2]="150元";
// 芭
key1[2][0][0]="160元";
key1[2][0][1]="170元";
key1[2][0][2]="180元";
// 西瓜
key1[2][1][0]="190元";
key1[2][1][1]="200元";
key1[2][1][2]="210元";
// 子
key1[2][2][0]="220元";
key1[2][2][1]="230元";
key1[2][2][2]="240元";
'如果目前是第一 色,而且水果名 正在改 ,就 水果名 到 fruit 下拉式 中
if howmanygroups=0 then
If thissubgroupcount=0 then
fruitlist = fruitlist & "" & thisvalue2 & "" & vbcrlf
end if
End If
'如果目前是第一 色,而且是第一 水果,就 格 到 price 下拉式 。
if howmanygroups=0 then
if howmanysubgroups=0 then
pricelist = pricelist & "" & thisvalue3 & "" & vbcrlf
end if
End if
thisgroupcount=thisgroupcount+1
thissubgroupcount=thissubgroupcount+1
lastvalue=thisvalue
loopcounter=loopcounter+1
rs.movenext
LOOP
' 忘了最後一 key[第 色] 和 key1[第 色] 的 列 度 未定 。
tempSTR=tempSTR & "key[" & howmanygroups & _
"]=new Array(" & howmanysubgroups+1 & ");" & _
vbcrlf
tempSTR=tempSTR & "key1[" & howmanygroups & _
"]=new Array(" & howmanysubgroups+1 & ");" & _
vbcrlf
' 忘了最後一 key[第 色][第 水果] 和 key1[第 色][第 水果] 的 列
'度 未定 。
tempSTR2=TempSTR2 &"key1[" & howmanygroups & "][" & howmanysubgroups & "]=new Array(" & thissubgroupcount & ");" & _
vbcrlf
tempSTR1= TempSTR1 & "key[" & howmanygroups & "][" & howmanysubgroups & "]=""" & lastvalue2 & """;" & vbCRLF
tempSTR=tempSTR & TempSTR1 & TempSTR2 & tempSTR3
' color 下拉式 作一 尾
colorlist=colorlist & ""
' fruit 下拉式 作一 尾
fruitlist= fruitlist & ""
' price 下拉式 作一 尾
pricelist= pricelist & ""
'一 始的 key 和 key1 列也不要忘 定 了。
myevent=vbcrlf & "key=new Array(" & howmanygroups+1 & ");"
myevent=myevent & vbcrlf & "key1=new Array(" & howmanygroups+1
myevent=myevent & ");" & vbcrlf & tempSTR
'大功告成,可以 料 了。
rs.close
set rs=nothing
my_conn.close
set my_conn=nothing
'先 生 Buildkey 副程式, 一 都不困 ,原理在上面已 解 了, 者不再 述, 行 果 :
function Buildkey(num)
{
Buildkey1(0);
document.myForm.fruit.selectedIndex=0;
for(ctr=0;ctr
tempSTR =vbcrlf & "function Buildkey" & "(num)" & vbcrlf
tempSTR =tempSTR & "{" & vbcrlf
tempSTR =tempSTR & "Buildkey1(0);" & vbcrlf
tempSTR =tempSTR & "document." & myForm & "."
tempSTR =tempSTR & listname2 & ".selectedIndex=0;" & vbcrlf
tempSTR =tempSTR & "for(ctr=0;ctr
再 大家看看最後的 果:
色:
色
色
色
水果:
果
李子
格:
10元
20元
30元
送出">
色
key[0][0]=" 果";
key[0][1]=" ";
key[0][2]="李子";
// 色
key[1][0]="柳丁";
key[1][1]="葡萄柚";
// 色
key[2][0]="芭 ";
key[2][1]="西瓜";
key[2][2]=" 子";
// 色
key1[0][0]=new Array(3);
key1[0][1]=new Array(3);
key1[0][2]=new Array(3);
// 色
key1[1][0]=new Array(3);
key1[1][1]=new Array(3);
// 色
key1[2][0]=new Array(3);
key1[2][1]=new Array(3);
key1[2][2]=new Array(3);
// 果
key1[0][0][0]="10元";
key1[0][0][1]="20元";
key1[0][0][2]="30元";
//
key1[0][1][0]="40元";
key1[0][1][1]="50元";
key1[0][1][2]="60元";
// 李子
key1[0][2][0]="70元";
key1[0][2][1]="80元";
key1[0][2][2]="90元";
// 柳丁
key1[1][0][0]="100元";
key1[1][0][1]="110元";
key1[1][0][2]="120元";
// 葡萄柚
key1[1][1][0]="130元";
key1[1][1][1]="140元";
key1[1][1][2]="150元";
// 芭
key1[2][0][0]="160元";
key1[2][0][1]="170元";
key1[2][0][2]="180元";
// 西瓜
key1[2][1][0]="190元";
key1[2][1][1]="200元";
key1[2][1][2]="210元";
// 子
key1[2][2][0]="220元";
key1[2][2][1]="230元";
key1[2][2][2]="240元";
function Buildkey(num)
{
Buildkey1(0);
document.myForm.fruit.selectedIndex=0;
for(ctr=0;ctr
其 程式 不 ,重 是在 列索引的 念,同 的有 可以在 直接提出,希望大家看了 篇文章之後,不要再 我 下拉式 (二 ) 如何做了!!祝大家身 健康, Coding 快 。
