当前位置: 代码迷 >> J2EE >> jsp页面怎么实现级联的上拉列表框
  详细解决方案

jsp页面怎么实现级联的上拉列表框

热度:69   发布时间:2016-04-22 00:29:41.0
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>
  相关解决方案