基于Ｊａｖａｓｃｒｉｐｔ技術的關聯表單設計和實現
2008-04-12 00:00:00徐杰孟建新
現代電子技術 2008年2期
摘 要：表單的填選及提交是ASP程序中用戶和服務器交換數據的最基本手段。在有些信息系統中，對用戶注冊的個人信息有著較高的要求，用戶提交數據的可靠性、嚴謹性是決定程序有效運行的主要因素。介紹一種基于Javascript技術的組合表單應用，能夠嚴謹又方便地為用戶提供大量數據的選擇，確保用戶注冊信息的正確與嚴謹。
關鍵詞：關聯表單；Javascript；ASP；用戶提交數據
中圖分類號：TP311 文獻標識碼：B
文章編號：1004-373X(2008)02-093-02
Design and Realization of Correlation Form Based on the Javascript Technical
XU Jie，MENG Jianxin
(Basic Department，Bengbu Tank Institute，Bengbu，233000，China)
Abstract：Select form and sumit filling the form and submit elections，the process of ASP users and server data exchange of the most basic means.Some of the information system，the user′s personal information registered higher demand，users of the reliability of data，solemnity，the ASP decided whether the procedures and effective functioning of the main factors.This paper describes a technique based on the combination of Javascript application form，to stringent convenient for users with the choice of large amounts of data to ensure that users of the correct registration information and rigor.
Keywords：correlation form;Javascript;ASP;user submit data
表單的填選及提交是Web應用程序中用戶和系統交互的基本方法。在有些信息系統中，對用戶注冊的個人信息有著較高的要求，用戶提交數據的可靠性、嚴謹性、是決定應用程序有效運行的主要因素。本文介紹了一種ASP技術框架下的基于javascript技術的組合表單應用，能夠嚴謹又方便地為用戶提供大量數據的選擇，確保了用戶注冊信息的正確與嚴謹。表單功能演示地址見文獻[1]。
下拉表單的二次選擇、相互關聯、內容準確方便，在注冊或提交數據等操作時能帶給用戶非常良好的體驗。不用刷新頁面，就能方便快捷地進行選擇關聯項目。
本文介紹的關聯表單，以注冊時的省市和地區選擇為例，把第1列的數據選中后，第2列的表單選項隨之做相應的變化，全國幾十個省市、幾百個地區，用這樣的方法實現，是非常方便的。
1 建立selectcity.js文件定義數據組和function過程
首先在相同目錄內建立文件selectcity.js，并在ASP程序中包調用文件。selectcity.js文件中存放數據，selectcity.js列出部分Array數組數據如下：
var ProvinceArray = new Array;
ProvinceArray［0］ = \"選擇省市\";
ProvinceArray［1］ = \"北京\";
ProvinceArray［2］ = \"上海\";
…
ProvinceArray［34］ = \"臺灣\";
以上是城市選擇數組，下面是相應的地區數組，只列出部分記錄，其他內容可以仿照格式自行添加。應用十分方便。
tCitys = new Array;
tCitys［1］ = new Array;
tCitys［1］［1］ = \"北京/東城區\";
tCitys［1］［2］ = \"北京/西城區\";
…
tCitys［1］［18］ = \"北京/延慶縣\";
tCitys［2］ = new Array;
tCitys［2］［1］ = \"上海/黃浦區\";
tCitys［2］［2］ = \"上海/盧灣區\";
…
tCitys［2］［20］ = \"上海/崇明縣\";
tCitys［34］ = new Array;
tCitys［34］［0］ = \"臺北市\";
tCitys［34］［1］ = \"高雄市\";
…
tCitys［34］［6］ = \"臺中市\";
下面定義2個函數function過程，然后在ASP頁面中調用他們。
function ProvinceOptionMenu()
{
var i;
provincebox = document.theform.prov;
for(i = 0;i < ProvinceArray.length;i++)
{
provincebox.options［i］=
new Option(ProvinceArray［i］，ProvinceArray［i］);
}
provincebox.length = i;
}
function selectcity()
{
provincebox = document.theform.prov;
selcity = parseInt(provincebox.selectedIndex);
tCity = tCitys［selcity］;
citybox = document.theform.city;
if(tCity != 1)
{
citybox = document.theform.city;
for(i = 0;i < tCity.length;i++)
{
str = tCity［i］;
citybox.options［i］ = new Option(str，str);
}
citybox.length = i;
}
else
{
if (citybox != 1){
citybox.options［0］ = new Option(\"選擇地區\"，\"\");
citybox.length = 1;}
}
}
2 在ASP文件中實現調用
ASP文件主要代碼如下：
＜script language=javascript src=\"selectcity.js\"＞＜/script＞
＜SELECT onchange=javascript:selectcity() name=prov＞
＜OPTION value=\"\" selected＞選擇..＜/OPTION＞
＜OPTION value=北京＞北京＜/OPTION＞
＜OPTION value=上海＞上海＜/OPTION＞
…
＜OPTION value=臺灣＞臺灣＜/OPTION＞
＜/SELECT＞
＜SCRIPT language=JavaScript＞
var provincebox = document.theform.prov;
for(var i=0;i＜provincebox.options.length;i++)
{ if(provincebox.options［i］.value==\"\")
provincebox.options［i］.selected=true;
}
＜/SCRIPT＞
＜SELECT name=city＞
＜SCRIPT＞
tCity = tCitys［］;
citybox = document.theform.city;
for(i = 0;i ＜ tCity.length;i++)
{
citybox.options［i］=new Option(tCity［i］，tCity［i］);
if(citybox.options［i］.value==\"\")
citybox.options［i］.selected=true;
}
citybox.length = i;
＜/SCRIPT＞
＜/SELECT＞
3 實現效果
選擇一級表單，會顯示相應的城省市。如圖1所示：
實現表單的選擇后，調用過程顯示關聯表單選項，可以方便地選擇關聯表單中的內容。如圖2所示：
4 結 語
本文介紹了一種在ASP技術下利用javascript實現的關聯表單的應用，并給出效果圖和相關演示地址，對于這類相似問題，只要參考本文介紹的方法，就可以得到解決。數組中的內容可以仿照格式自行添加，應用十分方便。
參 考 文 獻
［1］http://www.raivyou.com.[ZK)]
［2］李學軍.JSP Web開發教程[M].北京:海洋出版社，2005.
［3］黃榮升.FrontPage 2003中文版實用教程[M].北京:中國鐵道出版社，2004.
［4］易昭湘.ASP開發答疑200問[M].北京:人民郵電出版社，2005.
注：本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文。
