网页中下拉式列表框的数据过滤

网页下拉式列表框的数据过滤的情况我想大多数网络程序设计者都会遇到，这种情况具体是指一个页面中有两个或多个下拉列表框，第二个列表框的值随着第一个列表框的值改变（即过滤出不需要的数据），比如，在用户注册信息时，当用户选择了省份过后，该省辖的城市名称就出现在第二个下拉列表框中。

　　这种情况的解决方法有两种，一种是使用所用的网络程序设计语言（如ASP,JSP,PHP等）来实现，但这种方法的缺点是当用户很多网络数据很慢时，速度很慢，第二个下拉列表框的值需要一段时间才会出来，降低了效率，而且页面不好控制，这里不阐述这种方法。

　　第二种解决方法是采用javascript来控制，其基本思想是：首先将所有城市的名称和编码还有所属省份的编码存放在一个二位数组中，该数组有三列多行，行数根据城市个数决定，每一行的第一列表示城市编号，第二列表示城市名称，第三列表示所属省份的编号。该数据结构就像数据库中的表，只是这里的没有字段名。其代码如下：
<script @language=javascript>
city = new Array(5);
city[0] = new Array(3);
city[0][0]='成都';city[0][1]='49';city[0][2]='1';
city[1] = new Array(3);
city[1][0]='绵阳（2）';city[1][1]='50';city[1][2]='1';
city[2] = new Array(3);
city[2][0]='广州';city[2][1]='51';city[2][2]='2';
city[3] = new Array(3);
city[3][0]='深圳';city[3][1]='52';city[3][2]='2';
city[4] = new Array(3);
city[4][0]='上海';city[4][1]='53';city[4][2]='3';
</script>
　　然后再第一个下拉列表框中选项变化是执行的javascript函数如下（干函数的功能就是数据过滤）：
<script @language=javascript>
function selectcity(){
 document.form1.city.options[0]=new Option("请选择城市","-1");
 for(var ctr=1;ctr < document.form1.city.length; ctr++)
        document.form1.city.options[ctr]=new Option("",""); 
 var l=1;
 for(var k = 0;k < 5;k++){
  if(form1.province.value==city[k][2]){
      document.form1.city.options[l]=new Option(city[k][1],city[k][0]);
   l++;
   }
 }
}
</script>
　　在下拉列表框的表单中的代码如下：
<form action="" method="post" name="form1">
<select name="province" id="province" onChange="selectcity();">
   <option value="-1">请选择省份</option>  
  <option value="1" >四川</option>  
  <option value="2" >广东</option>  
  <option value="3" >上海</option>
  </select>  <br>
<select name="city" id="city" >          </select>
</form>

　　该代码已在现阶段各种常用的浏览器上测试通过，在某些嵌入式的浏览器上不支持，比如在NC上嵌入的浏览器上不支持这种方式，如果你使用的是IE或者Netscape，那么，请放心使用。