基于Ｊａｖａｓｃｒｉｐｔ技術(shù)的關(guān)聯(lián)表單設(shè)計(jì)和實(shí)現(xiàn)
2008-04-12 00:00:00徐杰孟建新
現(xiàn)代電子技術(shù) 2008年2期
摘 要：表單的填選及提交是ASP程序中用戶和服務(wù)器交換數(shù)據(jù)的最基本手段。在有些信息系統(tǒng)中，對(duì)用戶注冊(cè)的個(gè)人信息有著較高的要求，用戶提交數(shù)據(jù)的可靠性、嚴(yán)謹(jǐn)性是決定程序有效運(yùn)行的主要因素。介紹一種基于Javascript技術(shù)的組合表單應(yīng)用，能夠嚴(yán)謹(jǐn)又方便地為用戶提供大量數(shù)據(jù)的選擇，確保用戶注冊(cè)信息的正確與嚴(yán)謹(jǐn)。
關(guān)鍵詞：關(guān)聯(lián)表單；Javascript；ASP；用戶提交數(shù)據(jù)
中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：B
文章編號(hào)：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應(yīng)用程序中用戶和系統(tǒng)交互的基本方法。在有些信息系統(tǒng)中，對(duì)用戶注冊(cè)的個(gè)人信息有著較高的要求，用戶提交數(shù)據(jù)的可靠性、嚴(yán)謹(jǐn)性、是決定應(yīng)用程序有效運(yùn)行的主要因素。本文介紹了一種ASP技術(shù)框架下的基于javascript技術(shù)的組合表單應(yīng)用，能夠嚴(yán)謹(jǐn)又方便地為用戶提供大量數(shù)據(jù)的選擇，確保了用戶注冊(cè)信息的正確與嚴(yán)謹(jǐn)。表單功能演示地址見(jiàn)文獻(xiàn)[1]。
下拉表單的二次選擇、相互關(guān)聯(lián)、內(nèi)容準(zhǔn)確方便，在注冊(cè)或提交數(shù)據(jù)等操作時(shí)能帶給用戶非常良好的體驗(yàn)。不用刷新頁(yè)面，就能方便快捷地進(jìn)行選擇關(guān)聯(lián)項(xiàng)目。
本文介紹的關(guān)聯(lián)表單，以注冊(cè)時(shí)的省市和地區(qū)選擇為例，把第1列的數(shù)據(jù)選中后，第2列的表單選項(xiàng)隨之做相應(yīng)的變化，全國(guó)幾十個(gè)省市、幾百個(gè)地區(qū)，用這樣的方法實(shí)現(xiàn)，是非常方便的。
1 建立selectcity.js文件定義數(shù)據(jù)組和function過(guò)程
首先在相同目錄內(nèi)建立文件selectcity.js，并在ASP程序中包調(diào)用文件。selectcity.js文件中存放數(shù)據(jù)，selectcity.js列出部分Array數(shù)組數(shù)據(jù)如下：
var ProvinceArray = new Array;
ProvinceArray［0］ = \"選擇省市\(zhòng)";
ProvinceArray［1］ = \"北京\";
ProvinceArray［2］ = \"上海\";
…
ProvinceArray［34］ = \"臺(tái)灣\";
以上是城市選擇數(shù)組，下面是相應(yīng)的地區(qū)數(shù)組，只列出部分記錄，其他內(nèi)容可以仿照格式自行添加。應(yīng)用十分方便。
tCitys = new Array;
tCitys［1］ = new Array;
tCitys［1］［1］ = \"北京/東城區(qū)\";
tCitys［1］［2］ = \"北京/西城區(qū)\";
…
tCitys［1］［18］ = \"北京/延慶縣\";
tCitys［2］ = new Array;
tCitys［2］［1］ = \"上海/黃浦區(qū)\";
tCitys［2］［2］ = \"上海/盧灣區(qū)\";
…
tCitys［2］［20］ = \"上海/崇明縣\";
tCitys［34］ = new Array;
tCitys［34］［0］ = \"臺(tái)北市\(zhòng)";
tCitys［34］［1］ = \"高雄市\(zhòng)";
…
tCitys［34］［6］ = \"臺(tái)中市\(zhòng)";
下面定義2個(gè)函數(shù)function過(guò)程，然后在ASP頁(yè)面中調(diào)用他們。
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(\"選擇地區(qū)\"，\"\");
citybox.length = 1;}
}
}
2 在ASP文件中實(shí)現(xiàn)調(diào)用
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=臺(tái)灣＞臺(tái)灣＜/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 實(shí)現(xiàn)效果
選擇一級(jí)表單，會(huì)顯示相應(yīng)的城省市。如圖1所示：
實(shí)現(xiàn)表單的選擇后，調(diào)用過(guò)程顯示關(guān)聯(lián)表單選項(xiàng)，可以方便地選擇關(guān)聯(lián)表單中的內(nèi)容。如圖2所示：
4 結(jié) 語(yǔ)
本文介紹了一種在ASP技術(shù)下利用javascript實(shí)現(xiàn)的關(guān)聯(lián)表單的應(yīng)用，并給出效果圖和相關(guān)演示地址，對(duì)于這類相似問(wèn)題，只要參考本文介紹的方法，就可以得到解決。數(shù)組中的內(nèi)容可以仿照格式自行添加，應(yīng)用十分方便。
參 考 文 獻(xiàn)
［1］http://www.raivyou.com.[ZK)]
［2］李學(xué)軍.JSP Web開(kāi)發(fā)教程[M].北京:海洋出版社，2005.
［3］黃榮升.FrontPage 2003中文版實(shí)用教程[M].北京:中國(guó)鐵道出版社，2004.
［4］易昭湘.ASP開(kāi)發(fā)答疑200問(wèn)[M].北京:人民郵電出版社，2005.
注：本文中所涉及到的圖表、注解、公式等內(nèi)容請(qǐng)以PDF格式閱讀原文。
