jsp-----页面下拉框两级联动( ajax版 )

最新推荐文章于 2021-08-05 14:33:09 发布

iteye_8039

最新推荐文章于 2021-08-05 14:33:09 发布

阅读量308

点赞数

CC 4.0 BY-SA版权

分类专栏： servlet/jsp 文章标签： javascript 后端 ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_8039/article/details/82610249

servlet/jsp 专栏收录该内容

17 篇文章

订阅专栏

本文展示了如何使用Ajax技术和JavaScript在JSP页面中实现二级联动下拉框的效果。通过监听第一个下拉框的改变事件，发送POST请求到后端，后端根据传入参数返回对应城市的下拉选项数据，再由前端动态更新第二个下拉框的内容。示例代码包括了前端HTML、JavaScript以及后端Servlet的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台：---------------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
<script type="text/javascript">
   function getXmlHttpRequest(){
       var xhr = null;
       if((typeof XMLHttpRequest)!='undefined'){
           xhr = new XMLHttpRequest();
       }else {
           xhr = new ActiveXObject('Microsoft.XMLHttp');
       }
       return xhr;
   }
   function change(v1){
       var xhr = getXmlHttpRequest();
       xhr.open('post','city.do',true);
       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       xhr.onreadystatechange=function(){
          //服务器返回 yy,岳阳;cs,长沙;hh,怀化
          if(xhr.readyState == 4){
              var txt = xhr.responseText;
              var arr = txt.split(';');
              $('s2').innerHTML = '';

              for(i=0;i<arr.length;i++){
                  var arr1 = arr[i];
                  var arr2 = arr1.split(',');
                  var op = new Option(arr2[1],arr2[0]);
                  $('s2').options[i] = op;
              }
           }
         };
         xhr.send('name=' + v1);
}
</script>
</head>
<body style="font-size:30px;">
         <select id="s1" style="width:120px;" οnchange="change(this.value);">
              <option value="hn">湖南</option>
              <option value="bj">北京</option>
         </select>
         <select id="s2" style="width:120px;"> </select>
</body>
</html>

后端：------------------------------------------------------------------------------------------------------------------

public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {

              String uri = request.getRequestURI();
              String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
              response.setContentType("text/html;charset=utf-8");
              PrintWriter out = response.getWriter();
              if(path.equals("/city")){
                 String name = request.getParameter("name");
                 if(name.equals("hn")){
                    out.println("yy,岳阳;hh,怀化;cs,长沙"); -----手工组装下拉项数据格式
                 }else if(name.equals("bj")){
                   out.println("cy,朝阳;hd,海淀;dc,东城;xc,西城");-----手工组装下拉项数据格式
                }
            }
            out.close();
       }
}