三级联动简单实现

前言：三级联动作为地区数据最常用的技巧，我们经常需要使用，所以有一个简单便捷的三级联动尤为重要，所以在这里写出我的一个方式。希望有人能指出不足，加以更改。

 

 

 

下面放出基础结构

　　　　表结构，mapper，dao层

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Controller

@Controller
public class CityController {

    @Autowired
    CityService cityService;

    @RequestMapping("/tpCity")
    public String rtoCity(){
        return "Threecity";
    }

    @RequestMapping("/showByPid")
    @ResponseBody
    public List<City> showCityByPid(Integer pid){
        return cityService.showCityById(pid);
    }
}

 

 jsp

<body class="text-center">
    <select name="pid" onchange="upcity(this.value,'cid')">
        <option value="">省份</option>
    </select>
    <select name="cid" onchange="upcity(this.value,'did')">
        <option value="">市份</option>
    </select>
    <select name="did">
        <option value="">区份</option>
    </select>

    <script>

        $(function () {
            upcity(1,'pid');
        })
        function upcity(id,url) {
            /*每次追加下拉框之前，清空区级的数据*/
            $("[name='did']").html("<option value=''>区级</option>");
            $.post("showByPid",{pid:id},function (obj) {
                var str = "<option value=''>---请选择---</option>";
                for (var i = 0; i < obj.length; i++) {
                    str += "<option value='"+obj[i].id+"'>"+obj[i].cityname+"</option>";
                }
                $("[name='"+url+"']").html(str);
            })
        }
    </script>
</body>

 

posted @ 2021-12-16 14:43  御本美琴初号机  阅读(89)  评论(0)    收藏  举报