Jquery ajax 实现两级下拉菜单联动

一、概述：

     最近在项目开发中遇到了需要根据银行总行查出其对应的分行，其中一个下拉菜单显示总行，另一个下拉菜单显示分行，如下图所示：

 

    

二、实现步骤：

      声明：因为本人公司用的是自己的框架，很久以前开发的，所以很多处里都是在jsp页面里进行的，大家可以参考一下我的步骤，然后可以在一些开源框架中实现。

 

     1. 假设银行选择下拉菜单所在页面为bankInfo.jsp，在bankInfo.jsp页面中先查出所有银行的总行，然后再将查出的所有银行总行对象循环添加到总行所对应的下拉菜单中。

     2.  在bankInfo.jsp中添加如下的代码：

          <%

 

            CostAccountBO costAccountBo = new CostAccountBO(); 

            List<BankVO> headBanks = costAccountBo.getAllHeadBank();      // headBanks 是包含了所有银行总行对象的List               %>

 

           //以下代码是将查出的List循环添加到select中

            <select name="headBankSelect" id="headBankSelect" οnchange="selectSubBank()"> 

                 <option value="">---清选择总行---</option>

                   <%

                      for(BankVO headBank : headBanks){

                   %>