更简单的联动Select

联动Select的JavaScript代码

题启: 在网站设计中,联动Select的应用非常常见,通常省与市就是最常见的应用.有以前很长的一段时间里,一直不敢去碰这个东西,需要的时候就上网找现成的.(找现成的也有个窍门,直接在实现了这个功能的网页上查看源码即可以获得相关的javascript代码).但是使用现实的往往不尽如人意,最让人觉得窝囊的一点是需要将就它的高设计来设计数据库,以及form表单.经过一段时间的努力,终于摆脱了这个困境,下面是原创的联动select JavaScript代码.

使用方法:

1.通过服务器脚本汇入数据到两个变量中:strCountry,strPort,strCountry每项有两个字段,一个是标识码,一个是名称,用逗号隔开,项与项之间用分号隔开;strPort有每项有三个字段,一个是自身标识码,一个是strCountry的标识码,一个是名称,字段间用逗号隔开,项与项之间也用分号隔开.标识码及字段的格式没有特殊要求.

2.主调用函数是changePort(objS,objD),需要传入两个参数,objS一般是设置onchange选项的那个select,即源对象,objD是需要对态载入数据的那个select,即目标对象.如果在select中使用onchange=""的方法直接设置,objS可以使用this代替,例如:onchange="changePort(this,document.form1.select2);"

详细代码如下:

<script type="text/javascript">
var strCountry = "A6Y4T8D2Y5,马来西亚;V6T4N8X1S1,中华人民共和国";
var strPort = "D6B4A8L3G7,V6T4N8X1S1,大连;S6Q4K9U7Q1,V6T4N8X1S1,宁波港";
//处理字符串，转换为数组
var arrCountry = new Array();
var arrTemp = strCountry.split(";");
var i;
for(i=0;i<arrTemp.length;i++){
 arrCountry[i] = arrTemp[i].split(",");
}
//alert(arrCountry[0][0]+arrCountry[0][1]);

var arrPort = new Array();
arrTemp = strPort.split(";");
for(i=0;i<arrTemp.length;i++){
 arrPort[i] = arrTemp[i].split(",");
}
//alert(arrPort[0][0]+arrPort[0][2]);

function changePort(objS,objD){
 removeOptions(objD);
 var index = objS.selectedIndex;
 var codeS = objS.options[index].value;
 var j = 0;
 for(i=0;i<arrPort.length;i++){
  if(arrPort[i][1]==codeS){
   objD.options[j] = new Option(arrPort[i][2],arrPort[i][0]);
   j++;
  }
  if(j==0)
   objD.options[0] = new Option("没有可选项","0");
 }
}

function removeOptions(obj){
 for(i=0;i<obj.options.length;i++)
  obj.options[i] = null;
}
</script>