日期:2014-05-19  浏览次数:20715 次

jsp页面如何实现级联的下拉列表框
网站登录首页,如果实现先选择部门,然后在选择人员的功能。。用的是struts2,部门级人员都已经存在数据库中了!

请指点一二,尽可能详细点,有代码最好!谢谢


------解决方案--------------------
下面的是我做添加班级模块时做的用ajax实现二级联动下拉列表的例子,ajax代码在javascript中,通过第一个下拉列表的onchange方法触发ajax后台自动调用SelectChangeServlet,得到第二个下拉列表的数据。
JScript code

      <script language="javascript">
        var xmlHttpRes;  
          
        function createXMLHttpRequest() {
            if(window.XMLHttpRequest) {  
                xmlHttpRes = new XMLHttpRequest();  
            } else if(window.ActiveXObject) {  
                xmlHttpRes = new ActiveXobject("Microsoft.XMLHTTP");  
            }
        }  
          
        function selectchange() {
            createXMLHttpRequest();  
            var department = document.getElementById("department").value;
            var url = "selectChangeServlet?department=" + department;
            xmlHttpRes.open("post", url, true);  
            xmlHttpRes.onreadystatechange = callback;  
            xmlHttpRes.send(null);  
        }  
          
        function callback() { 
            if(xmlHttpRes.readyState == 4) {  
                if(xmlHttpRes.status == 200) {
                    eval(xmlHttpRes.responseText);  
                }  
            }  
        }
        function show(){
            var department = document.getElementById("department").value;
            var classInfo = document.getElementById("classInfo").value;
            alert("您确定是上【" + department + classInfo + "】的课吗?") ;
        }
    </script>

------解决方案--------------------
jsp中:
HTML code
<tr>
    <td>区域 </td>
    <td>
        <select style="width: 155px" id="selectArea" name="issueTracking.areaCode" onchange="whenAreaChange();"></select>
        <s:textfield name="issueTracking.areaName" id="textAreaName" readonly="true" />
    </td>
</tr>
<tr>
    <td>製程</td>
    <td>
        <select style="width: 155px" id="selectProcess" name="issueTracking.process"></select>
        <s:textfield name="issueTracking.processName" id="textProcess" readonly="true" />
    </td>
</tr>