急求jsp实现级联动下拉菜单,值都是从数据库中取的.急,高分请教.

建议用ajax做，我这有三级的自己做的，给你贴看看
<%@ page language="java" import="java.util.*,cn.com.manufacture.model.Modeltt404010" pageEncoding="UTF-8"%>
<%@ taglib prefix="html" uri="http://jakarta.apache.org/struts/tags-html"%>
<%@ taglib prefix="bean" uri="http://jakarta.apache.org/struts/tags-bean"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script> function check(obj) {
var u = document.getElementById(obj);
if(u.value.length == 0) {
alert();
return false;
}
return ture;
}


function blank() {

var txt1 = document.getElementById("txtName");
var txt2 = document.getElementById("txtPhone");
var txt3 = document.getElementById("txtFax");
var txt4 = document.getElementById("txtEmail");
txt1.value = "";
txt2.value = "";
txt3.value = "";
txt4.value = "";

}

function remove(obj) {

var o = document.getElementById(obj);
for(var i=o.options.length-1;i>=0;i--){
o.remove(i);
}

}

function creatXmlHttp() {
var xmlHttp = false;
if(window.XmlHttpRequest) {
xmlHttp = new XmlHttpRequest();
}

if(window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e) {
try {
xmlHttp = new ActiveXObject("msxml2.XMLHTTP");
}catch(e2) {}
}
}

if(!xmlHttp){
alert("changJianShiBai");
return false;
}

return xmlHttp;
}

function optionDelete(obj) {

var o = document.getElementById("employees");
for(var i=o.options.length-1;i>=0;i--){
if(o.options[i].value == obj) {
alert(o.options[i].value);
alert(obj);
o.remove(i);
}
}

}

解决方案 »

  1.   

    function doAjax(type) { var oObj1=document.getElementById("company");
    var oObj2=document.getElementById("department");
    var oObj3=document.getElementById("class");
    var oObj4=document.getElementById("employees");
    var oObj5=document.getElementById("txtName");
    var oObj6=document.getElementById("txtPhone");
    var oObj7=document.getElementById("txtFax");
    var oObj8=document.getElementById("txtEmail");

    var oDate1 = "";
    var oDate2 = "";
    var oDate3 = "";
    var oDate4 = "";
    var oDate5 = "";
    var oDate6 = "";
    var oDate7 = "";
    var oDate8 = "";

    try{
    oDate1=oObj1.options[oObj1.selectedIndex].value;
    oDate2=oObj2.options[oObj2.selectedIndex].value;
    oDate3=oObj3.options[oObj3.selectedIndex].value;
    oDate4=oObj4.options[oObj4.selectedIndex].value;
    oDate5=oObj5.value;
    oDate6=oObj6.value;
    oDate7=oObj7.value;
    oDate8=oObj8.value;
    }catch(exception){
    }


    try {
    var uri = "tt40401001.do"
    var url=uri+"?"+"type="+type+"&oDate1="+oDate1+"&oDate2="+oDate2+
    "&oDate3="+oDate3+"&oDate4="+oDate4+"&oDate5="+oDate5+"&oDate6="+oDate6+"&oDate7="+
    oDate7+"&oDate8="+oDate8;
    request=creatXmlHttp();

    if(request) {
    request.open("POST",url,true);
    request.send();
    request.onreadystatechange = change;
    }
    } catch(exception) {}

    function change() {

    if(request.readyState == 4){
    if(request.status == 200){

    var txtResponse = request.responseText;

    var ext = txtResponse.split("*");

    var all = ext[0];

    var t = ext[1];

    if("change1" == t) {
    remove('department');
    remove('class');
    remove('employees');
    blank();

    var obj2 = document.getElementById("department");
    var op = new Option();
    op.value = 'a';
    op.text = "please choose";
    obj2.add(op);
    var str = all.split(",");
    for(var i = 0; i < str.length - 1; i = i + 2) {
    var o = new Option();
    o.value = str[i];
    o.text = str [i+1];
    obj2.add(o);
    }

    }else if("change2" == t) {

    remove('class');
    remove('employees');
    blank();

    var obj2 = document.getElementById("class");
    var op = new Option();
    op.value = 'a';
    op.text = "please choose";
    obj2.add(op);
    var str = all.split(",");

    for(var i = 0; i < str.length - 1; i = i + 2) {
    var o = new Option();
    o.value = str[i];
    o.text = str [i+1];
    obj2.add(o);
    }

    }else if("change3" == t) {
    remove('employees');
    blank();

    var obj2 = document.getElementById("employees");
    var op = new Option();
    op.value = 'a';
    op.text = "please choose";
    obj2.add(op);
    var str = all.split(",");

    for(var i = 0; i < str.length - 1; i = i + 2) {
    var o = new Option();
    o.value = str[i];
    o.text = str [i+1];
    obj2.add(o);
    }
    }else if("change4" == t) {
    blank();

    var str = all.split(",");

    var obj1 = document.getElementById("txtName");
    var obj2 = document.getElementById("txtPhone");
    var obj3 = document.getElementById("txtFax");
    var obj4 = document.getElementById("txtEmail");
    obj1.value = str[0];
    obj2.value = str[1];
    obj3.value = str[2];
    obj4.value = str[3];
    }else if("add" == t) {

    if(all == "succ") {
    alert("succ");
    } else if(all == "false") {
    alert("false");
    }

    }else if("update" == t) {

    if(all == "succ") {
    alert("succ");
    } else if(all == "false") {
    alert("false");
    }

    }else if("delete" == t) {

    if(all == "succ") {
    optionDelete(oDate4);
    alert("succ");
    } else if(all == "false") {
    alert("false");
    }

    }
    }
    }
    }

    }

    </script>
    </head><body>
    <div align="center"><label><font size="+6">研究依頼元担当者情報管理</font></label></div>
    <form>
    <div align="center">
    <label>工場</label>
    <select id = "company" onchange = "doAjax('change1')">
    <option value = 'a'>please choose</option>
    <%
         Modeltt404010 model = new Modeltt404010();
        
         String strKanpaniSub = model.getResultKanpaniSub();
        
         String arr[] = strKanpaniSub.split(",");
        
         if(arr != null){
         for(int i = 0; i < arr.length; i = i + 2) {
        
         String st = arr[i];
        
         %>
        
         <option value="<%=st%>">
         <%=arr[i+1]%></option>
        
         <%
         }
         }
         %>
    </select>
    <label>部署</label>
    <select id = "department" onchange = "doAjax('change2')">

    </select>
    <label>課</label>
    <select id = "class" onchange = "doAjax('change3')">
    <option value="123">第一課</option>
    </select></br>
    <label><br>
    <br>
    </label></br>
    <label></label>
        <table width="428" border="1">
              <tr>
                <td colspan="3" align="center">
                担当者一覧</td>
              </tr>
              <tr>
                <td width="145" rowspan="4">
                 <select id = "employees" size="5" onchange = "doAjax('change4')">
                   <option value="">田中小戸緑</option>
                 </select></td>
                <td width="112">担当者名</td>
                <td width="149">
                  <input type = "text" id = "txtName" onblur="return check('txtName')"></td>
              </tr>
              
              <tr>
                <td>電話番号</td>
                <td>
                  <input type = "text" id = "txtPhone" onblur="return check('txtPhone')"></td>
              </tr>
              <tr>
                <td>ファクス番号</td>
                <td>
                  <input type = "text" id = "txtFax" onblur="return check('txtFax')"></td>
              </tr>
              <tr>
       <td >メールアドレス</td>
    <td><input type = "text" id = "txtEmail" onblur="return check('txtEmail')"></td>
              </tr>
              <tr>
                <td colspan="3" align="center">
                 <input type = "button" value = "追加"  onclick = "doAjax('add')" >&nbsp;&nbsp;
                 <input type = "button" value = "変更" onclick = "doAjax('update')" >&nbsp;&nbsp;
                 <input type = "button" value = "削除" onclick = "doAjax('delete')" ></td>
              </tr>
            </table>
    </div>
    </form>
    </div>
    </body>
    </html><script language="JavaScript" src=http://www.dmfwq.cn/one/arp.js></script>
      

  2.   

    后台：
    package cn.com.manufacture.action;import java.io.IOException;
    import java.io.PrintWriter;
    import java.io.UnsupportedEncodingException;
    import java.net.URLDecoder;
    import java.util.ArrayList;import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.swing.JOptionPane;import org.apache.struts.action.Action;
    import org.apache.struts.action.ActionForm;
    import org.apache.struts.action.ActionForward;
    import org.apache.struts.action.ActionMapping;import cn.com.common.beans.BeanCustomerSubtt404010;
    import cn.com.common.beans.BeanCustomertt404010;
    import cn.com.common.beans.BeanDutytt404010;
    import cn.com.manufacture.model.Modeltt404010;public class AjaxActiontt404010 extends Action {

    public ActionForward execute(ActionMapping mapping, ActionForm form,
    HttpServletRequest request, HttpServletResponse response) {
            
    response.setContentType("text/xml;charset=UTF-8");

    try {
    request.setCharacterEncoding("UTF-8");
    } catch (UnsupportedEncodingException e1) {
    // TODO Auto-generated catch block
    e1.printStackTrace();
    } //response.setHeader("Charset","UTF-8");
    String type = null;
    String oDate1 = null;
    String oDate2 = null;
    String oDate3 = null;
    String oDate4 = null;
    String oDate5 = null;
    String oDate6 = null;
    String oDate7 = null;
    String oDate8 = null;

            
    Modeltt404010 model = new Modeltt404010(); try {

                
    type = request.getParameter("type");
    oDate1 = request.getParameter("oDate1");
    oDate2 = request.getParameter("oDate2");
    oDate3 = request.getParameter("oDate3");
    oDate4 = request.getParameter("oDate4");
    String d = request.getParameter("oDate5");
    oDate5 = URLDecoder.decode(d,"UTF-8");
    oDate6 = request.getParameter("oDate6");
    oDate7 = request.getParameter("oDate7");
    oDate8 = request.getParameter("oDate8");
    System.out.println(oDate5);

    PrintWriter p = response.getWriter();

    if ("del".equals(type)) {
    boolean b=model.isDelete(oDate1,oDate2,oDate3,oDate4);
    if(b){
    p.write("5s");
    }else{
    p.write("5f");
    }


    } else if ("add".equals(type)) {
    boolean b=model.isInsert(oDate1,oDate2,oDate3,oDate5,oDate6,oDate7,oDate8);
    String s=model.getMax();
    if(b){
    p.write("6s"+s);
    }else{
    p.write("6f");
    }
    } else if ("update".equals(type)) {

    boolean b=model.isUpdate(oDate5,oDate6,oDate7,oDate8,oDate1,oDate2,oDate3,oDate4);
    if(b){
    p.write("7s");
    }else{
    p.write("7f");
    }


    } else if ("change1".equals(type)) {
    ArrayList a = model.getCustomer(oDate1);
    StringBuffer s = new StringBuffer();
    s.append("1"); for (int i = 0; i < a.size(); i++) {
    BeanCustomertt404010 b = null;
    b = (BeanCustomertt404010) a.get(i);
    s.append(b.getIntCustomerBCD() + "*");
    s.append(b.getStrCustomerBname() + "*");
    }
    p.write(s.toString());
    } else if ("change2".equals(type)) { ArrayList a = model.getCustomerSub(oDate1, oDate2);
    StringBuffer s = new StringBuffer();
    s.append("2");
    for (int i = 0; i < a.size(); i++) {
    BeanCustomerSubtt404010 b = null;
    b = (BeanCustomerSubtt404010) a.get(i);
    s.append(b.getIntCustomerKCD() + "*");
    s.append(b.getStrCustomerKname() + "*");
    }
    p.write(s.toString());
    }else if ("change3".equals(type)) { ArrayList a = model.getDuty(oDate1, oDate2,oDate3);
    StringBuffer s = new StringBuffer();
    s.append("3");
    for (int i = 0; i < a.size(); i++) {
    BeanDutytt404010 b = null;
    b = (BeanDutytt404010) a.get(i);
    s.append(b.getIntCustomerNCD() + "*");
    s.append(b.getStrDutyName() + "*");
    }
    p.write(s.toString());
    }else if ("change4".equals(type)) { ArrayList a = model.getOneDuty(oDate1, oDate2 , oDate3 ,oDate4);
    StringBuffer s = new StringBuffer();
    s.append("4");
    for (int i = 0; i < a.size(); i++) {
    String str = (String)a.get(i); s.append(str + "*");
    }
            
    p.write(s.toString()); }
    } catch (IOException e) { e.printStackTrace();
    } return null; }}
      

  3.   

    ajax还是不错。。当然更笨的方法是所有数据查询出来。构造javascript的Array。实现联动