二级联动,数据库查询，动态写入

  本项目使用三层架构，数据访问层进行访问数据库,业务逻辑层处理数据,页面显示,父栏目直接由数据库查询循环显示，子栏目写入Js 数组，通过改变父栏目而动态改变子栏目。

//Dao类数据访问层代码

 public Map<Integer, List<Type>> getTypeMap(int uid,int status){
  //首先定义Map和list集合
  Map<Integer, List<Type>> map = new HashMap<Integer, List<Type>>();
  List<Type> list = new ArrayList<Type>();
  Type type1 = null;
  //定义父栏目为0
  int  pid = 0;
  String sql = "";
  String sqll = "";
  try {
   super.getCon();
   if(status == 1){
     sql = "select * from t_type where pid = 0";
   
   }else{
     sql = "select * from t_type where id in (select pid from t_type where id in (select tId from t_userType where uid ="+uid+"))and pid = 0"; //查询所有为0的栏目信息
   
   }
   pstmt = con.prepareStatement(sql);
   rs = pstmt.executeQuery();
   while(rs.next()){
    type1= new Type();
    type1.setId(rs.getInt("id"));
    type1.setType(rs.getString("type"));
    type1.setDetail(rs.getString("detail"));
    type1.setPid(rs.getInt("pid"));
    list.add(type1); //将查询到的信息存入list中
    map.put(0, list); //将list添加到map集合中
   }
   //循环所有为0的信息
   for (int i = 0; i < list.size(); i++) {
    List<Type> list1 = new ArrayList<Type>();
    pid = ((Type)list.get(i)).getId();
    if(status == 1){
     sqll = "select * from t_type where pid = "+pid;
    }
    else{
     sqll = "select * from t_type where id in (select tid from t_userType where uid = "+uid+") and pid != 0";
    }
   
    pstmt = con.prepareStatement(sqll);
    rs = pstmt.executeQuery();
    while(rs.next()){
     Type type2 = new Type();
     type2.setId(rs.getInt("id"));
     type2.setType(rs.getString("type"));
     type2.setDetail(rs.getString("detail"));
     type2.setPid(rs.getInt("pid"));
     list1.add(type2);
     map.put(pid, list1);
    }
   }
  } catch (Exception e) {
   e.printStackTrace();
  } finally{
   super.Close(rs, pstmt, con);
  }
  return map;
 }

 public List<Type> getTypeByPID(){
  List<Type> list = new ArrayList<Type>();
  try {
   super.getCon();
   int id = 0;
   String sql = "select * from t_type where pid = "+id;
   pstmt = con.prepareStatement(sql);
   rs = pstmt.executeQuery();
   while(rs.next()){
    Type type = new Type();
    type.setId(rs.getInt("id"));
    type.setType(rs.getString("type"));
    type.setDetail(rs.getString("detail"));
    type.setPid(rs.getInt("pid"));
    list.add(type);
   }
  } catch (Exception e) {
   e.printStackTrace();
  } finally{
   super.Close(rs, pstmt, con);
  }
  return list;
 }

 public List<Type> getTypeByID(int pid){
  List<Type> list = new ArrayList<Type>();
  try {
   super.getCon();
   String sql = "select * from t_type where pid = "+pid;
   pstmt = con.prepareStatement(sql);
   rs = pstmt.executeQuery();
   while(rs.next()){
    Type type = new Type();
    type.setId(rs.getInt("id"));
    type.setType(rs.getString("type"));
    type.setDetail(rs.getString("detail"));
    type.setPid(rs.getInt("pid"));
    list.add(type);
   }
  } catch (Exception e) {
   e.printStackTrace();
  } finally{
   super.Close(rs, pstmt, con);
  }
  return list;
 }

 

//JavaScript代码

 

<script>

//声明一个数组，用来存放得到的二级信息
 var fulanmu = new Array();
</script>
<%
 List<Type> fuList = (List<Type>)typeBiz.getTypeMap().get(0);
 for(int i = 0;i<fuList.size();i++){
  type1 = (Type)fuList.get(i);
 %>

//循环显示二级信息
  <script>

        fulanmu[<%=i+1 %>]='<%=type1.getType() %>';
        fulanmu[<%=i+1 %>]=new Array('',<%List<Type> ziList = (List<Type>)typeBiz.getTypeByID(type1.getId()); for(int j = 0;j<ziList.size();j++){type2 = (Type)

ziList.get(j); %><%if(j!=0){ %>,<%}%>'<%=type2.getType() %>'<%}%>);
  </script>
 
 <%
  }
  %>
  <script>

 //父栏目改变，子栏目相应的改变
function changeType()
{
 //得到父栏目的index
  var fuIndex=document.myForm.fulanmu.selectedIndex;
  var newOption;
  if(fuIndex != 0){
   //定义子栏目的长度为0
   document.myForm.zilanmu.options.length=0;
   for (var i=0;i<fulanmu[fuIndex].length;i++)
   {
          newOption=new Option(fulanmu[fuIndex][i], fulanmu[fuIndex][i]);
    document.myForm.zilanmu.options.add(newOption);
      }
    document.myForm.zilanmu.selectedIndex=0;
  
    document.myForm.newsType.value=document.myForm.fulanmu.value;
   }
   else{
       document.myForm.zilanmu.options.length=0;
   }
  }

//页面代码
 <body style="background-color:#99CCFF;">
<form  action="admin/doNews.jsp?op=add" method="post" name="myForm" οnsubmit="return checkForm()">
<table width="712" border="1">
  <tr>
    <td height="30" colspan="2" align="center" class="style1">添加新闻</td>
  </tr>
  <tr>
    <td width="108" align="right">标&nbsp;&nbsp;&nbsp;&nbsp;题:</td>
    <td width="588"><input type="text" name="title" id="title" size="35" οnblur="checkTitle()"/><input type="text" name="uId" id="uId"  size="5" value="<%=uid %>"

/><div id="errorTitle"></div></td>
    </tr>
      <tr>
    <td align="right">副标题:</td>
    <td><input type="text" name="fTitle" id="fTitle" size="35" οnblur="checkfTitle()" /><div id="errorfTitle"></div></td>
  </tr>
    <tr>
    <td align="right">类&nbsp;&nbsp;&nbsp;&nbsp;别:</td>
    <td>
    <!-- 父栏目 通过从数据库查询 循环显示 -->
    <select name="fulanmu" id="fulanmu" style="width:120px;" onChange="changeType()">
    <option value="0">---请选择---</option>
    <%
     List<Type> fulanmuList = (List<Type>)typeBiz.getTypeMap().get(0);
     for(int i = 0;i<fulanmuList.size();i++){
      Type ty = fulanmuList.get(i);
     %>
      <option value="<%=ty.getType() %>"><%=ty.getType() %></option>
    <%
     }
     %>
    </select>&nbsp;
 <!-- 子栏目 通过数据库查询 添加到js数据根据父栏目变化而改变 -->
    <select name="zilanmu" id="zilanmu" style="width:120px;" οnchange="lanmu()">
      <option value=""></option>
    </select>&nbsp;<input type="text" name="newsType" value=""/><div id="errorType"></div>
    </td>
  </tr>
  <tr>
    <td align="right">来&nbsp;&nbsp;&nbsp;&nbsp;源:</td>
    <td><input type="text" name="sourse" id="sourse" size="35" οnclick="checkSourse()" /><div id="errorSourse"></div></td>
  </tr>

    <tr>
    <td align="right">图&nbsp;&nbsp;&nbsp;&nbsp;片:</td>
    <td><input name="newsImg" type="text" name="newsImg" id="newsImg" οnclick="checkImg()" size="22" /><input type="button" name="Button" value="上传图片"

οnclick="uploadImg()"/><div id="errorImg"></div><div id="showImg"></div><div id="shanchu" style="display:none"><a href="javascript:shanchu()">删除</a></div></td>
  </tr>
  <tr>
    <td align="right">作&nbsp;&nbsp;&nbsp;&nbsp;者:</td>
    <td><input name="author" type="text" id="author" οnclick="checkAuthor()" size="35" /><div id="errorAuthor"></div></td>
  </tr>
  <tr>
    <td align="right" valign="top">内&nbsp;&nbsp;&nbsp;&nbsp;容:</td>
    <td align="left" valign="top"><textarea name="contents" id="contents" cols="50" rows="6" οnclick="checkContent()"></textarea><div id="errorContent"></div></td>
  </tr>
  <tr>
    <td align="right" valign="top">描&nbsp;&nbsp;&nbsp;&nbsp;述:</td>
    <td align="left" valign="top"><textarea name="detail" id="detail" cols="50" rows="3" οnclick="checkDetail()"></textarea><div id="errorDetail"></div></td>
  </tr>
  <tr>
    <td height="12" colspan="2" align="center"><input type="submit" name="Submit" id="Submit" value="确认添加" />&nbsp;
    <input type="reset" name="Reset" id="Reset" value="重置" /></td>
  </tr>
</table>
</form>
  </body>