基于Javascript技术的关联表单设计和实现

摘 要：表单的填选及提交是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 != null)

{

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 != null){

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］.[ZK)]

［2］李学军.JSP Web开发教程[M].北京:海洋出版社,2005.

［3］黄荣升.FrontPage 2003中文版实用教程[M].北京:中国铁道出版社,2004.

［4］易昭湘.ASP开发答疑200问[M].北京:人民邮电出版社,2005.

注：本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文。