Jquery实现省市联动

JqProvinceServlet:

public void doGet(HttpServletRequest request, HttpServletResponse response)             throws ServletException, IOException {          try {             response.setContentType("text/html;charset=UTF-8");             request.setCharacterEncoding("UTF-8");             JqProvinceCityService jqProvinceCityService = new JqProvinceCityService();             List<Province> list = jqProvinceCityService.findProvince();             request.setAttribute("list", list);             request.getRequestDispatcher("/JQ_province_city/JQ_province_city.jsp").forward(request, response);         } catch (SQLException e) {             // TODO Auto-generated catch block             e.printStackTrace();         }     }

JqProvinceCityService:

/**      * 寻找省份      * @return      * @throws SQLException      */     public List<Province> findProvince() throws SQLException {         JqProvinceCityDao jqProvinceCityDao = new JqProvinceCityDao();         return jqProvinceCityDao.findProvince();     }

JqProvinceCityDao:

/**      * 寻找省份      * @return      * @throws SQLException      */     public List<Province> findProvince() throws SQLException {         QueryRunner queryRunner = new QueryRunner(C3P0JDBCUtils.getDataSource());         String sql = "select * from province";         List<Province> list = queryRunner.query(sql, new BeanListHandler<Province>(Province.class));         return list;     } 

---

JqCityServlet:

    public void doGet(HttpServletRequest request, HttpServletResponse response)             throws ServletException, IOException {         try {             response.setContentType("text/html;charset=UTF-8");             request.setCharacterEncoding("UTF-8");             //接收数据             String pid = request.getParameter("pid");             JqProvinceCityService jqProvinceCityService = new JqProvinceCityService();             List<City> list = jqProvinceCityService.findCity(pid);             //将list集合生成xml             XStream xStream = new XStream();             //修改标签名             xStream.alias("city", City.class);             /**city就是标签名              * <list>              *  <city>              *      <cid>1</cid>              *      <cname>哈尔滨</cname>              *      <pid>4</pid>              *  </city>              * </list>              */             String XMLStr = xStream.toXML(list);              response.getWriter().print(XMLStr);              /* 将类中属性作为 标签的属性             xStream.useAttributeFor(City.class, "cid");             xStream.useAttributeFor(City.class,"cname");             xStream.useAttributeFor(City.class,"pid");*/             /**类中属性设为标签的属性后，格式变为              * <list>              *  <city cid="1" cname="哈尔滨" pid="4">              * </list>              */          } catch (SQLException e) {             // TODO Auto-generated catch block             e.printStackTrace();         }     }

JqProvinceCityService:

/**      * 根据pid查找城市      * @param pid      * @return      * @throws SQLException       */     public List<City> findCity(String pid) throws SQLException {         JqProvinceCityDao jqProvinceCityDao = new JqProvinceCityDao();         return jqProvinceCityDao.findCity(pid);     }

JqProvinceCityDao:

/**      * 寻找城市      * @param pid      * @return      * @throws SQLException      */     public List<City> findCity(String pid) throws SQLException {         QueryRunner queryRunner = new QueryRunner(C3P0JDBCUtils.getDataSource());         String sql = "select * from city where pid = ?";         List<City> list = queryRunner.query(sql, new BeanListHandler<City>(City.class), pid);         return list;     }

---

JQ_province_city.jsp:

<!-- 兄弟，一定要先导Jquery的包啊！再导自己写的script函数！顺序不能反了！ --> <script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/WebTest/JQ_province_city/JQ_province_city.js"></script>  <tr>     <td>籍贯</td>         <td>             <select id="province" name="province" >                 <option>--请选择--</option>                 <c:forEach var="p" items="${ list }">                     <option value="${ p.pid }">${ p.pname }</option>                 </c:forEach>             </select>             <select id="city" name="city">                 <option>--请选择--</option>             </select>         </td>     </tr>

JQ_province_city.js:

$(function() {     alert("111");     //为省份下拉列表绑定事件     $("#province").change(function() {     alert("111");         //获得省份id         var pid = $(this).val();         $.post("/WebTest/JqCityServlet",{"pid":pid},function(data) {             var $city = $("#city");             $city.html("<option>--请选择--</option>");             //遍历，city为list中的标签名             $(data).find("city").each(function() {                 var cid = $(this).children("cid").text();                 var cname = $(this).children("cname").text();                 //打印city名称, var $city = $("#city")                 $city.append("<option value='"+cid+"'>"+cname+"</option>");             });         });     }); });   

文章来源: Jquery实现省市联动