二级联动下拉菜单写法

来源:互联网 发布:linux svn http访问 编辑:程序博客网 时间:2024/05/01 15:46

首先,在javabean中定义arrayList的格式,例子中
  bankInfoList = [[093200, 分行营业部],
   [092804, 市分行第二营业部],
   [092400, 分行外汇业务部],
   [090502, 宝山支行],
   [091243, 崇明县支行],
   [094302, 长宁支行],
   [097602, 浦东分行]]
 bankPlaceList = [[[093232, 分行营业室, 延安东路518号]],
     [[092802, 分行第二营业部营业室, 徐家汇路601号]],
     [[092401, 分行外汇业务部营业大厅1, 中山东一路26号]],
     [[090505, 月浦支行, 月浦龙镇路78号   宝泉路龙镇路路口], [090519, 长兴支行, 凤西支路1号], [09052A, 牡丹江路储蓄所, 牡丹江路881号   夏园发展有限公司底楼], [09501A, 陈太路储蓄所, 锦绣路716号(陈太路716号)  上海大学北门]],
     [[091203, 崇明县三星分理处, 三星镇星月路137号], [091205, 庙镇支行, 庙镇镇庙镇大街60号], [091206, 崇明县合作分理处, 合作竖星路216号], [091207, 崇明县江口分理处, 江口镇], [091208, 城桥支行, 城桥镇中津桥路48号], [091209, 港西支行, 港西镇], [091211, 崇明县鳌山分理处, 候家镇长候路63号], [091212, 建设支行, 建设镇镇中路268号], [091214, 新河支行, 新中路669号], [091219, 崇明县港沿分理处, 港沿镇港沿公路1109号], [091226, 新海支行, 新海农场振兴路], [091227, 崇明县东风分理处, 东风农场林风公路], [091228, 崇明县长江分理处, 长江农场], [091229, 崇明县跃进分理处, 跃进农场跃进一村], [091234, 人民路储蓄所, 城内人民路58号], [091236, 崇明县长征分理处, 长征农场], [091239, 绿华支行, 绿华镇绿华路526号], [091244, 上海市虹口区曲阳支行, 曲阳路2号]],
     [[094303, 仙霞支行, 上海市茅台路596号 水城路 仙霞路路口 仙霞宾馆往西], [094312, 长宁支行北虹路储蓄所, 长宁区仙霞路1122号  近林泉路]],
     [[097603, 浦东大道支行, 浦东大道1718号  靠近苗圃路和巨野路路口], [097605, 浦东分行营业部, 浦东南路379号  靠近浦东大道 东方医院], [097606, 培花储蓄所, 芳草路388号  白杨路 芳草路路口], [097607, 塘桥支行, 塘桥路219号       浦东南路 塘桥路路口], [097608, 张扬路支行, 张杨路1038号    松林路 张扬路路口], [097609, 滨江支行, 商城路337号     靠近浦城路 商城路路口], [097610, 北蔡支行, 沪南公路591号     沪南公路东面 北蔡车站], [097611, 浦东东昌支行, 张杨路828-838号  靠近崂山东路 张扬路], [097612, 玉兰路储蓄所, 玉兰路315号       牡丹路 玉兰路路口], [097613, 民生路储蓄所, 民生路818弄19号  灵山路 民生路路口], [097615, 浦东洋泾支行, 博山路52-64号    博山东路和罗山路的交界处], [097616, 锦绣华城分理处, 锦绣路3088弄18号102室(靠近乐购)], [097617, 信息城支行, 民生路1399号    靠近杨高中路 进才中学], [097618, 博山路支行, 博山东路399号    居家桥路 博山东路路口], [097619, 浦东花木支行, 龙阳路1629号    浦建路 龙阳路路口], [097620, 洪山支行, 浦东洪山路189号  昌里路 洪山路路口], [097623, 浦三路支行, 浦东浦三路69号   浦东南路 浦三路路口], [097624, 大道站支行, 耀华路595号    西迎路往北到底 耀华路上], [097625, 三林支行, 浦东三林路487号  上南路 三林路路口], [097626, 由由新村储蓄所, 严丰路218--222号   严中路 严丰路路口]]]

在jsp页面中:
1:首先:将 bankPlaceList 格式转换为所需要的格式,对应每一个bankInfoList中的ID
     其位置可能有多个。
   StringBuffer buffer = new StringBuffer();
   buffer.append("<script>");
   buffer.append(" var subcat = new Array(); ");
   int appendNo = 0;
   for(int i = 0; i<bankPlaceList.size();i++){
      ArrayList temp = (ArrayList)bankPlaceList.get(i);
      for(int j = 0; j<temp.size(); j++){
        ArrayList tmepOne = (ArrayList)temp.get(j);
        String placeID = (String)tmepOne.get(0);
        String placeName = (String)tmepOne.get(2);
        String addBuffer = "subcat["+appendNo+"]=new Array('" + i + "','" + placeID + "','" + placeName + "');";
        System.out.println(" addBuffer " + addBuffer);
        appendNo ++;
        buffer.append(addBuffer);
      }
   }
   buffer.append("</script>");
   out.println(buffer);
  
2:然后,设置一个script的function;
<script language="javascript">
  function showPlaces(){
    var tempValue = document.inputSearchForm.drawingBank.value;
    var len = tempValue.length;
    // 由于对于每个 bankInfoList 中获取 bankid 我在其后面加了 _i,i为0-n;
    var changeNumber= tempValue.substring(len-1,len);
    alert(changeNumber);
    document.inputSearchForm.drawingPlace.length = 0;
    document.inputSearchForm.drawingPlace.options[0] = new Option('==请选择==','');
    for (i=0; i<subcat.length; i++){
 if (subcat[i][0] == changeNumber){
     document.inputSearchForm.drawingPlace.options[document.inputSearchForm.drawingPlace.length] = new Option(subcat[i][2], subcat[i][1]);
 }
    }   
  }
</script>

3: 下拉框的显示:
<form name="inputSearchForm">
  <td>所属支行</td>
  <td><select name="drawingBank" onchange="showPlaces()">
      <option value="" selected >==请选择==</option>
     <%
     if(bankInfoList!=null&&!bankInfoList.isEmpty()){
        for(int i = 0; i<bankInfoList.size();i++){
          ArrayList tempInfo = (ArrayList)bankInfoList.get(i);
      %>
      <option value="<%=(String)tempInfo.get(0)+'_'+i%>"><%=tempInfo.get(1)%></option>
      <%
        }
      }
      %>
  </select></td>
  <td>提款地点</td>
  <td><select name="drawingPlace">
        <option value="" selected >==请选择==</option>
  </select></td>
</form>

4: 在这个节选的例子中,重点在于 StringBuffer buffer 并接形成<script></script>
5:我所打印的buffer为:
<script>
 var subcat = new Array();
 subcat[0]=new Array('0','093232','延安东路518号');
 subcat[1]=new Array('1','092802','徐家汇路601号');
 subcat[2]=new Array('2','092401','中山东一路26号');
 subcat[3]=new Array('3','090505','月浦龙镇路78号   宝泉路龙镇路路口');
 subcat[4]=new Array('3','090519','凤西支路1号');
 subcat[5]=new Array('3','09052A','牡丹江路881号   夏园发展有限公司底楼');
 subcat[6]=new Array('3','09501A','锦绣路716号(陈太路716号)  上海大学北门');
 subcat[7]=new Array('4','091203','三星镇星月路137号');
 subcat[8]=new Array('4','091205','庙镇镇庙镇大街60号');
 subcat[9]=new Array('4','091206','合作竖星路216号');
 subcat[10]=new Array('4','091207','江口镇');
 subcat[11]=new Array('4','091208','城桥镇中津桥路48号');
 subcat[12]=new Array('4','091209','港西镇');
 subcat[13]=new Array('4','091211','候家镇长候路63号');
 subcat[14]=new Array('4','091212','建设镇镇中路268号');
 subcat[15]=new Array('4','091214','新中路669号');
 subcat[16]=new Array('4','091219','港沿镇港沿公路1109号');
 subcat[17]=new Array('4','091226','新海农场振兴路');
 subcat[18]=new Array('4','091227','东风农场林风公路');
 subcat[19]=new Array('4','091228','长江农场');
 subcat[20]=new Array('4','091229','跃进农场跃进一村');
 subcat[21]=new Array('4','091234','城内人民路58号');
 subcat[22]=new Array('4','091236','长征农场');
 subcat[23]=new Array('4','091239','绿华镇绿华路526号');
 subcat[24]=new Array('4','091244','曲阳路2号');
 subcat[25]=new Array('5','094303','上海市茅台路596号 水城路 仙霞路路口 仙霞宾馆往西');
 subcat[26]=new Array('5','094312','长宁区仙霞路1122号  近林泉路');
 subcat[27]=new Array('6','097603','浦东大道1718号  靠近苗圃路和巨野路路口');
 subcat[28]=new Array('6','097605','浦东南路379号  靠近浦东大道 东方医院');
 subcat[29]=new Array('6','097606','芳草路388号  白杨路 芳草路路口');
 subcat[30]=new Array('6','097607','塘桥路219号       浦东南路 塘桥路路口');
 subcat[31]=new Array('6','097608','张杨路1038号    松林路 张扬路路口');
 subcat[32]=new Array('6','097609','商城路337号     靠近浦城路 商城路路口');
 subcat[33]=new Array('6','097610','沪南公路591号     沪南公路东面 北蔡车站');
 subcat[34]=new Array('6','097611','张杨路828-838号  靠近崂山东路 张扬路');
 subcat[35]=new Array('6','097612','玉兰路315号       牡丹路 玉兰路路口');
 subcat[36]=new Array('6','097613','民生路818弄19号  灵山路 民生路路口');
 subcat[37]=new Array('6','097615','博山路52-64号    博山东路和罗山路的交界处');
 subcat[38]=new Array('6','097616','锦绣路3088弄18号102室(靠近乐购)');
 subcat[39]=new Array('6','097617','民生路1399号    靠近杨高中路 进才中学');
 subcat[40]=new Array('6','097618','博山东路399号    居家桥路 博山东路路口');
 subcat[41]=new Array('6','097619','龙阳路1629号    浦建路 龙阳路路口');
 subcat[42]=new Array('6','097620','浦东洪山路189号  昌里路 洪山路路口');
 subcat[43]=new Array('6','097623','浦东浦三路69号   浦东南路 浦三路路口');
 subcat[44]=new Array('6','097624','耀华路595号    西迎路往北到底 耀华路上');
 subcat[45]=new Array('6','097625','浦东三林路487号  上南路 三林路路口');
 subcat[46]=new Array('6','097626','严丰路218--222号   严中路 严丰路路口');
</script>