三級聯動簡單實現
阿新 • • 發佈：2021-12-16
前言：三級聯動作為地區資料最常用的技巧，我們經常需要使用，所以有一個簡單便捷的三級聯動尤為重要，所以在這裡寫出我的一個方式。希望有人能指出不足，加以更改。
下面放出基礎結構
表結構，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>