级联操作

    xiaoxiao2021-04-13  43

    级联操作:

    因为没有创建数据库的缘故,把数据都写在了serelect文件上面。

    一下代码实现了基本的省和市的级联操作。

    JSP页面代码:

    <html> <head> <base href="<%=basePath%>"> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> //当省份选择改变时出发的函数 function selectChange(){ //从服务端返回来的数据是JSON类型 $.getJSON("ProvinceSer",{gid:$("#sheng").val()}, function(data){ //清除市的下拉框 document.getElementById("city").options.length=0; for(var i=0;i<data.city.length;i++){ //向市的下拉框进行追加项 $("#city").append("<option value="+ data.city[i].id+">"+ data.city[i].name +"</option>"); } }); } </script> </head> <body> <h3>级联操作</h3> 省:<select name="sheng" οnchange="selectChange()" id="sheng"> <option value="1">广东</option> <option value="2">广西</option> <option value="3">湖南</option> <option value="4">湖北</option> <option value="5">北京</option> </select> 市:<select name="city" id="city"> </select> </body> </html>

    serelect文件代码:

    public class ProvinceSer extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String gid = request.getParameter("gid"); //从数据库取与省份对应的城市集合 List<City> list = new ArrayList<City>(); if(gid.equals("1")){ list.add(new City(10,"广州")); list.add(new City(11,"深圳")); list.add(new City(12,"珠海")); list.add(new City(13,"茂名")); }else if(gid.equals("2")){ list.add(new City(20,"南宁")); list.add(new City(21,"柳州")); list.add(new City(22,"桂林")); }else if(gid.equals("3")){ list.add(new City(30,"长沙")); list.add(new City(31,"湘潭")); list.add(new City(32,"株洲")); list.add(new City(33,"张家界")); }else if(gid.equals("4")){ list.add(new City(40,"武汉")); list.add(new City(41,"黄石")); list.add(new City(42,"恩施")); }else if(gid.equals("5")){ list.add(new City(50,"朝阳")); list.add(new City(51,"丰台")); list.add(new City(52,"海滨")); list.add(new City(53,"昌平")); } //把java集合封装成JSON对象,传到jsp页面上 try{ JSONArray ja = JSONArray.fromObject(list); JSONObject jo = new JSONObject(); //把数据封装成json数据,数组名市:city jo.put("city", ja); //把json数组发送到响应给ajax请求 response.getWriter().write(jo.toString()); }catch(Exception e){ } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } } 声明变量:

    public class City { private int id; private String name; public City(){} // 无参的构造函数 public City(int id, String name) { //有参的构造函数 this.id = id; this.name = name; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } }

    JSP页面代码:
    转载请注明原文地址: https://ju.6miu.com/read-669395.html

    最新回复(0)