三级联动

最新推荐文章于 2024-11-07 14:27:24 发布

πππα

最新推荐文章于 2024-11-07 14:27:24 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

文章标签：二级联动三级联动

本文链接：https://blog.youkuaiyun.com/javamengxin/article/details/77841892

一个简单的二级联动,可以在往上编写三级联动

1.Controller里边的两个方法，一个是查询所有省份，一个是根据查询出来的地区的pid再查地区

@Controller
@RequestMapping("user")
public class PoopController {
    @Resource
    private Userservice us;
    @RequestMapping("list")
    public String list( Model model){
        List<Poop> list=us.list();
        model.addAttribute("list",list);
        return "list";
    }
    @ResponseBody
    @RequestMapping("listName")
    public List listName(int pid){
        List<Poop> listName=us.listName(pid);
        return listName;
    }

2.jsp界面的一些处理

<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#va").change(function () {
                var cc=$(this).val();
                $.ajax({
                    type:"get",
                    url:"/user/listName.action",
                    data:{
                        pid:cc
                    },
                    dataType:"json",
                    success:function (data) {
                        $.each(data,function (index,aaa) {
                            $("#vb").append(
                                "<option value='"+aaa.id+"'>"+aaa.name+"</option>"
                            );
                        })
                    }
                })
            })
        })
    </script>
</head>
<body>
<center>

    <select id="va">
        <option>-地区-</option>
        <c:forEach var="us" items="${list}">
        <option value="${us.id}">${us.name}</option>
        </c:forEach>
    </select>

    <select id="vb">
<option>-请选择-</option>
    </select>

</center>
</body>
</html>