当下拉框A的值改变时，下拉框B的值也随之改变
ajax的小练习。持久层和业务层都很简单，主要是表现层。
1、控制器
1 @RestController 2 @RequestMapping("province") 3 public class ProvinceController { 4 @Autowired 5 private IProvinceService service; 6 7 @RequestMapping("findAll") 8 public List<ProvinceBean> findAll(){ 9 return service.findAll(); 10 } 11 12 @RequestMapping("findById") 13 public ProvinceBean findById(int id){ 14 return service.findByProvince(id); 15 } 16 }
2、表现层html+js
onchange()的用法（摘自网络）：
当元素的值发生改变时，会发生 onchange 事件。
对于单选框和复选框，在被选择的状态改变时，发生 onchange 事件。
提示：该事件类似于 oninput 事件。不同之处在于 oninput 事件在元素值改变后立即发生，而 onchange 在元素失去焦点而内容发生改变后发生。另一个区别是 onchange 事件也适用于 <select> 元素。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="/html/axios.min.js"></script> 7 <script> 8 function $(id){ 9 return document.getElementById(id); 10 } 11 12 window.onload = function change(){ 13 axios.get("/province/findAll",null).then(e => { 14 var info = e.data; 15 var str = ""; 16 for (var i = 0;i < info.length;i++){ 17 var obj = info[i]; 18 str += `<option value= '${obj.id}'>${obj.name}</option>`; 19 } 20 $("province").innerHTML = str; 21 }) 22 } 23 24 function see(){ 25 axios.get("/province/findById",{ 26 params:{ 27 id:$("province").value 28 } 29 }).then(e => { 30 var info = e.data; 31 var str = ""; 32 for (var i = 0;i < info.list.length;i++){ 33 var obj = info.list[i]; 34 str += `<option value= '${obj.id}'>${obj.name}</option>`; 35 } 36 $("city").innerHTML = str; 37 }) 38 } 39 </script> 40 </head> 41 <body> 42 省份：<select id="province" onchange="see()"> 43 </select> 44 45 城市: <select id="city"> 46 </select> 47 </body> 48 </html>
3、效果图
