JS连动下拉框的实现

以前学。NET的时候 下拉框连动只要设置一下就好了，现在在用PHP开发，没有这个功能，只能自己用JS写了，这个应该比较经常用到。

<script language="javascript">

//绑定城市下拉框
var subcat = new Array();
subcat[0] = new Array("0","0","0");
<!-- BEGIN city -->
subcat[{ROWCNT}] = new Array("{proID}","{cityCName}","{proID}_{cityID}");
<!-- END city -->

function changeselect1(locationid)
{

    var locationid=document.getElementById('hProvince').value;
 
 document.searchF.city.length = 0;
 for (i=0; i<subcat.length; i++)
 {
  if (subcat[i][0] == locationid)
  {
   document.searchF.city.options[document.searchF.city.length] = new Option(subcat[i][1], subcat[i][2]);
  } 
 }
 
}

</script>

上面的代码中

<!-- BEGIN city -->
subcat[{ROWCNT}] = new Array("{proID}","{cityCName}","{proID}_{cityID}");
<!-- END city -->

是用PHP模板技术先把城市的绑定输出到页面，自己自动生成数组

然后在HTML中添加调用上面的代码即可

例

<select name="province" id="province" onchange="changeselect1(this.value)">
    <option value="">==Province==</option>
    <!-- BEGIN province -->
    <option value="{proId}">{proCName}</option>
    <!-- END province -->
  </select>

这是个省的下拉框，通过模板技术生成 调用上面的changeselect1方法就会使下面的这个城市下拉框改变

<select name="city" id="city" style="WIDTH: 202px">
    <option value="" selected="selected">==City==</option>
   </select>

注意上面的ID，如果ID更改 上面JS中调用的ID也要改变。也可以在changeselect1(this.value，'province','city'）中再传两个参数，一个省下拉框的ID，一个城市下拉框的ID，然后在上面的JS方法中再做修改就可以了。