博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
两级别联动 jquery+json实现
阅读量:5756 次
发布时间:2019-06-18

本文共 4746 字,大约阅读时间需要 15 分钟。

hot3.png

//首先创建 两级联动的两个实体类 省市类package com.javamail.controller.vo;import java.util.List;public class Province {    private int pid;    private String pname;    private List
 cities;    public Province(int pid, String pname, List
 cities) {        super();        this.pid = pid;        this.pname = pname;        this.cities = cities;    }    public Province() {        // TODO Auto-generated constructor stub    }    public List
 getCities() {        return cities;    }    public void setCities(List
 cities) {        this.cities = cities;    }    public int getPid() {        return pid;    }    public void setPid(int pid) {        this.pid = pid;    }    public String getPname() {        return pname;    }    public void setPname(String pname) {        this.pname = pname;    }     }//城市类package com.javamail.controller.vo;public class City {    private int cid;    private String cname;    private int parentid;    public City(int cid, String cname) {        super();        this.cid = cid;        this.cname = cname;    }    public int getCid() {        return cid;    }    public void setCid(int cid) {        this.cid = cid;    }    public String getCname() {        return cname;    }    public void setCname(String cname) {        this.cname = cname;    }         public int getParentid() {        return parentid;    }        public void setParentid(int parentid) {        this.parentid = parentid;    }    public City() {        // TODO Auto-generated constructor stub    }    public City(int cid, String cname, int parentid) {        super();        this.cid = cid;        this.cname = cname;        this.parentid = parentid;    }        }//后台 组合数据 用jackson把list转换成 json格式的数据传到页面package com.javamail.controller;import java.io.IOException;import java.io.StringWriter;import java.io.Writer;import java.util.ArrayList;import java.util.List;import org.codehaus.jackson.JsonGenerationException;import org.codehaus.jackson.map.JsonMappingException;import org.codehaus.jackson.map.ObjectMapper;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.servlet.ModelAndView;import com.javamail.controller.vo.City;import com.javamail.controller.vo.Province;@Controller@RequestMapping(value="/threelinkage")public class ThreeLinkage {    @RequestMapping(value="redirt")    public ModelAndView redirt(){        ModelMap modelMap = new ModelMap();        //创建第一个省下的城市        List
 cs1 = new ArrayList
();        City c1=new City();        c1.setCid(10);        c1.setCname("涿州市");        c1.setParentid(1);        City c2=new City();        c2.setCid(11);        c2.setCname("高碑店");        c2.setParentid(1);        cs1.add(c1);        cs1.add(c2);        //创建第一个省        Province province = new Province();        province.setPid(1);        province.setPname("河北省");        province.setCities(cs1);                //创建第二个省城市        List
 cs2 = new ArrayList
();        City c3=new City();        c3.setCid(21);        c3.setCname("朝阳区");        c3.setParentid(2);        City c4=new City();        c4.setCid(11);        c4.setCname("海淀区");        c4.setParentid(2);        cs2.add(c3);        cs2.add(c4);        //创建第二个省        Province province2 = new Province();        province2.setPid(2);        province2.setCities(cs2);        province2.setPname("北京");                //放在一个List里面        List
 p = new ArrayList
();        p.add(province);        p.add(province2);        //把list转换成json格式        ObjectMapper mapper = new ObjectMapper();        Writer strWriter = new StringWriter();        try {            mapper.writeValue(strWriter, p);            modelMap.put("data",strWriter);            System.out.println(strWriter);        } catch (JsonGenerationException e) {            // TODO Auto-generated catch block            e.printStackTrace();        } catch (JsonMappingException e) {            // TODO Auto-generated catch block            e.printStackTrace();        } catch (IOException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        ModelAndView modelAndView = new ModelAndView("threelinkage",modelMap);        return modelAndView;    }}//jsp页面接收数据 转成json对象 进行操作<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
Insert title here
    $(function(){        //初始化方法        var d = jQuery.parseJSON('${data}');        var $pselect = $("select[name=province]");         var $cselect =$("select[name=city]");        var parentid="";        var pid=1;        for(var i = 0;i
'+d[i].pname+'');              for(var j = 0;j
'+(d[i].cities)[j].cname+'');                }             }        }        $("select[name=province]").change(function(){            var d = jQuery.parseJSON('${data}');            var p1=$(this).children('option:selected').val();//这就是selected的值 value<%--            var p2=$(this).children('option:selected').text();--%>//获取selected的文本值            //先清空city select中的值            $cselect.empty();            for(var i = 0;i
'+(d[i].cities)[j].cname+'');                    }                }            }        })    })    省:
            市:
    

转载于:https://my.oschina.net/u/1998885/blog/375783

你可能感兴趣的文章
判断是否含有中文
查看>>
android 资源种类及使用
查看>>
Explorer程序出错
查看>>
Centos7同时运行多个Tomcat
查看>>
使用CocoaPods过程中的几个问题
查看>>
我的友情链接
查看>>
mysql数据类型---数值型---int
查看>>
为eclipse安装maven插件
查看>>
公司新年第一次全员大会小记
查看>>
最懒的程序员
查看>>
JAVA8 Stream 浅析
查看>>
inner join on, left join on, right join on要详细点的介绍
查看>>
SAS vs SSD对比测试MySQL tpch性能
查看>>
Spring boot 整合CXF webservice 全部被拦截的问题
查看>>
Pinpoint跨节点统计失败
查看>>
【Canal源码分析】Canal Server的启动和停止过程
查看>>
机房带宽暴涨问题分析及解决方法
查看>>
iOS 绕过相册权限漏洞
查看>>
我的友情链接
查看>>
XP 安装ORACLE
查看>>