高分求解 ajax实现下拉列表的动态双组合功能

   根据Ajax 一组选择按钮。第二个的内容根据第一个的选择而即时改变，使用Ajax与服务器异步交互数据。   
          技术最好是用struts1 加 ajax实现。希望懂的朋友写具体点。比如把action 里的实现方法写明。 表嘛 就用 部门dept  和员工emp 。感激不尽！！！

解决方案 »

  1.   

    双动态跟单动态并没有本质区别
    只要你理解了Ajax，就没有问题
    写代码说明实在太费时间，你可以Google一下
      

  2.   


       额  只要写action的两个方法  和 jsp页面上的ajax  就行了， 就耽误10分钟的时间。
        ajax 理解不了啊，我都纠结这个动态下拉列表两天了，没点头绪··
      

  3.   

    给你点信心：so easy!妈妈再也不要担心我的编码了！
      

  4.   

    ajax我也刚学的，其实很简单的，建议你还是去学下，光说很麻烦不说，你也很难理解的
      

  5.   

    部门表的 下拉框  加 onchange 事件  进入JS 调用AJAX 查询数据库，下面的代码 看懂了 要给分哦！
    红色的DIV 的ID 很重要，在JS里用到 main.jsp<td width="18%">Industry:</td>
                <td class="mid_tab1_td"><logic:present name="industrydata" scope="session">
    <logic:notEmpty name="industrydata" scope="session">
    <select name="industry" id="industry" style="width:100%" onchange="depart(this.value)">
    <option value="">&nbsp;</option>
    <logic:iterate id="industry" name="industrydata" scope="session">
     <option value="<bean:write name="industry" property="sjzdid"/>"><bean:write name="industry" property="sjzdname"/></option>
    </logic:iterate>
    </select>
    </logic:notEmpty>
    <logic:empty name="industrydata" scope="session">
    <logic:redirect page="/page/login.jsp"></logic:redirect>
    </logic:empty>
    </logic:present>
    <logic:notPresent name="industrydata" scope="session">
    <logic:redirect page="/page/login.jsp"></logic:redirect>
    </logic:notPresent></td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td width="18%">Department:</td>
                <td class="mid_tab1_td">
                <div id="departinfo"> <select name="department" id="department"  style="width:100%">
    <option value="">&nbsp;</option>
    </select><div>进入main.js 
    var xmlHttpRequest;
    function createXMLHttpRequest(){
    if(window.ActiveXObject){
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
    xmlHttpRequest = new XMLHttpRequest();
    }
    }
    function depart(industryid){
    if(industryid=="")
    {
    return;
    }
    var url = "depart.do?method=selectDepartByIndustry&industryid="+industryid;
    createXMLHttpRequest();
    xmlHttpRequest.open("post", url);
    xmlHttpRequest.onreadystatechange = callback;
    xmlHttpRequest.send(null);
    }
    function callback(){
    if(xmlHttpRequest.readyState == 4){
    if(xmlHttpRequest.status == 200){
    departinfo.innerHTML = xmlHttpRequest.responseText;
    }
    }
    }进入action ：
    package com.hhs.action;import java.util.List;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import org.apache.struts.action.ActionForm;
    import org.apache.struts.action.ActionForward;
    import org.apache.struts.action.ActionMapping;
    import org.apache.struts.actions.DispatchAction;import com.hhs.bean.Department;
    import com.hhs.service.DeaprtmentServiceImp;public class DepartmentAction extends DispatchAction{

    /**
     * 根据 行业异步查询部门信息
     */
    public ActionForward selectDepartByIndustry(ActionMapping mapping, ActionForm form,
    HttpServletRequest request, HttpServletResponse response) throws Exception {
    DeaprtmentServiceImp dsp=new DeaprtmentServiceImp();
    String industryid=request.getParameter("industryid").trim();
    String condition=" where industryid ="+industryid;
    List<Department> departmentdata=dsp.SelectDepartmentByCondition(condition);
    if(departmentdata!=null)
    {
    request.setAttribute("departmentdata", departmentdata);
    return mapping.findForward("departajax");
    }
    return mapping.findForward("fail");
    }
    }
    AJAX回调页面：departajax.jsp
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
    <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
    <%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
    <%
          String path = request.getContextPath();
          String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
      %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
     <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Department AJAX</title>
    </head>
    <body>
    <logic:present name="departmentdata" scope="request">
    <logic:notEmpty name="departmentdata" scope="request">
    <select name="department" id="department" style="width:100%">
    <option value="">&nbsp;</option>
    <logic:iterate id="department" name="departmentdata" scope="request">
     <option value="<bean:write name="department" property="departmentid"/>"><bean:write name="department" property="departmentname"/></option>
    </logic:iterate>
    </select>
    </logic:notEmpty>
    <logic:empty name="departmentdata" scope="request">
    <select name="department" id="department" style="width:100%">
    <option value="">&nbsp;</option>
    </select>
    </logic:empty>
    </logic:present>
    <logic:notPresent name="departmentdata" scope="request">
    <logic:redirect page="/page/login.jsp"></logic:redirect>
    </logic:notPresent>
    </body>
    </html>