动态选择数据用法一例

ZDNet软件频道　时间：2002-01-21　作者：ZDNET CHINA 特稿 | 　我要评论()
本文关键词：JavaScript WEB

通过此例学习如何在网页上体现数据库表之间的关联是如何进行的。程序用ASP做事例，但是很容易得可以迁移到其它平台上。

我们在开发一个应用程序的过程中创建了一个执行数据关联的表单数据输入页，在这个页面上，如果用户改变了主选框的选择项，那么独立于主选框之外的另一选框应能根据主选框的选项列出与之关联的不同选项列表。单从页面设计来看不算什么复杂的。

但是，当我在开发某项目管理应用程序的就遇到麻烦了，这个数据库应用项目中要求在两个数据表之间建立关联。此时主表是ProjectType。副表是ProjectCategories；副表上设置了一个指向主表外键。

以下是有关数据表定义：

            Table ProjectType;
            Fields: 
            ProjectTypeId int PK, 
            ProjectTypeDesc varchar(50)
             
            Table ProjectCategories; 
            Fields: 
            ProjectCatId int PK, 
            ProjectTypeId int FK, 
            ProjectCatDesc varchar(50)

最后的设计思路是：在主列表变动的时候同服务器建立一次请求-响应通信来刷新副列表中的数据。接着在装载网页的时候再用一个动态数组上载数据。

这样，一旦用户修改主选表的选项值。该程序就采用DHTML动态生成JavaScript数组的方式修改副列表

以下应用程序用ASP脚本语言编写。程序代码经过简单修改、适当保留页面功能处理之后很容易转换到非Windows平台上使用，。

<%@ Language=VBScript %>
<%
DBconStr = "The DSN or DataBase Connection string"

set con = server.createobject("adodb.connection")
con.ConnectionString = DbconStr
con.open
set rs1 = server.createobject("adodb.recordset")
set rs = server.createobject("adodb.recordset")

OptionArray1 = "<OPTION VALUE=""-1"">" & _
"Select Project Type</option>" & vbcrlf
SelectText = ""

rs1.Open "SELECT ProjectTypeDesc, " & _
"ProjectTypeId FROM ProjectType",con

'主列表产生列表循环
while not rs1.EOF
'给主列表增加条目
OptionArray1 = OptionArray1 & "<option id=""" & _
rs1("ProjectTypeId") & """ value=""" & _
rs1("ProjectTypeId") & """>" & _
rs1("ProjectTypeDesc") & _
"</option>" & vbcrlf

'给动态数组增加条目
sqlArray ="SELECT ProjectCatDesc, ProjectCatId," & _
" ProjectTypeID FROM ProjectCategories where " & _
"ProjectTypeID=" & rs1("ProjectTypeId")
rs.Open sqlArray, con
if not rs.EOF then
   SelectText = SelectText & _
   "new Array(new Array(""   "", 0),"
   while not rs.EOF
      SelectText = SelectText & _
      "new Array(""" & rs("ProjectCatDesc") & _
      """, " & rs("ProjectCatId") & ")," & vbcrlf
      rs.MoveNext
   wend
   SelectText=left(SelectText,(len(SelectText) - 3))
   SelectText=SelectText & "),"
else
   SelectText = SelectText & _
   "new Array(new Array(""There are no " & _
   "categories available."", 0)),"
end if

rs.Close
rs1.MoveNext
wend
'主循环结束
rs1.Close
SelectText=left(SelectText,(len(SelectText) - 2))

set rs=nothing
set rs1=nothing
con.Close
set con = nothing
%>
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function fillSelectFromArray(selectCtrl,
itemArray, goodPrompt, badPrompt, defaultItem) {
var i, j;
var prompt;
// 清空现有的条目
for (i = selectCtrl.options.length; i >= 0; i--) {
selectCtrl.options[i] = null;
}
prompt = (itemArray != null) ? goodPrompt : badPrompt;
if (prompt == null) {
j = 0;
}
else {
selectCtrl.options[0] = new Option(prompt);
j = 1;
}
if (itemArray != null) {
// 增加新条目
for (i = 0; i < itemArray.length; i++) {
selectCtrl.options[j] = new Option(itemArray[i][0]);
if (itemArray[i][1] != null) {
selectCtrl.options[j].value = itemArray[i][1];
}
j++;
}
// 给子表选择第1个条目
selectCtrl.options[0].selected = true;
   }
}
appropCat = new Array(
<%=SelectText%>)
);

</script>
<title>Dynamic Item Select</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000" >
<form method=post name="frmProjectMain" >
<table width="400" border="1">
<tr>
<td valign="top" align="center" colspan="4">
<h1>Dynamic Item Select</h1>
</td>
</tr>
<tr>
<td width="100%" colspan="4">Project Type
 
<select name="ProjType"
onChange="fillSelectFromArray(this.form.AppropCat,
((this.selectedIndex == -1) ? null :
appropCat[this.selectedIndex-1]));">
<%=OptionArray1%>
</select>
<td >
</tr>
<tr>
<td colspan="4">Catagory  
     
<select name="AppropCat" >
<OPTION>                       </OPTION>
<OPTION>                       </OPTION>
</select>
</td>
</tr>
</table>
</BODY>
</HTML>