开发工具：Eclipse
前端技术：JQuery+CSS
后端技术：JFinal（选取什么后端开发方法都可以，只要你能实现数据库get、set即可，这篇笔记就不讲JFinal了）
数据库：MySQL
前端页面是这样，要实现的是橙色框框里的内容。
具体功能是：表单一开始显示的是数据库中用户的地址，当用户选择了相应的地区之后，要实时更新表单里的内容，当按保存按钮后将更新后的表单内容存储到数据库中，完成信息修改。
1.前端页面
Note：county拼错了，是country，不过问题不大。那个css是调整样式的，这就是你自己的事了，我就不多说，接下来那个js文件是重头戏！
html核心代码：
<br><br>所在地区<input id="area" name="user.area" value="#(user.area??)" readonly><br><br><div class="select-group" style="float:right"><select id="province" name="province" onchange="doProvAndCityRelation();" ><option id="choosePro" >省份</option></select> <select id="citys" name="city" onchange="doCityAndCountyRelation();"><option id='chooseCity'>城市</option></select> <select id="county" name="county" onchange="doCountyRelation();"><option id='chooseCounty'>区/县</option></select></div>
二、JQuery代码
太长了，就不全部都贴上来了，我也是基于别人写的改的，附上大佬代码的链接：
https://codepen.io/acelibin/pen/wGooev
在该代码的基础上，我又做了一些修改，因为那个代码只实现了地区选择功能，而我需要记住用户的选择并存储到数据库。
1.doProvAndCityRelation中加入这段代码：
$.each(cityJson,function(i, val) {if (val.item_code == $("#province").val()) {$("#area").val(val.item_name);}});
实现了将用户已经选择的省份保存到 Id=area的元素value中，如果你要问为什么不在前端直接这样实现⬇️（即在前端代码中写一个<script>直接获取select中的value,然后直接赋予area）
这种方法不行🙅，因为你会发现传入的value都是数字，为啥？因为每个option的value都为item_code，所以html只能get到item_code，只是显示给用户看的是item_name。
即：<option value="item_code">item_name</option>
（如果难以理解，就好好研究一下那个JQuery代码）
顺水推舟，在html中，我们无法get到这个对象的item_name,我们只能跑到这个数组和这些方法存在的地方去想办法，就是去JQuery的代码中大干一番！
于是，如上上上图所示，我在它获取到 用户选择的省份 这个元素之后，对cityJson数组进行一个遍历，找到和这个对象的val（item_code）相等的对象，取到它的item_name，然后直接传给area。
已经取到了省份，接下来取市、区也是这么做 “area += newarea”。
$.each(cityJson,function(i, val) {if (val.item_code == $("#citys").val()) {$("#area").val(document.getElementById("area").value+val.item_name);}});
function doCountyRelation(){$.each(cityJson,function(i, val) {if (val.item_code == $("#county").val()) {$("#area").val(document.getElementById("area").value+val.item_name);}});}
琢磨了大半天，写个博客纪念一下(^_^)
希望能帮到你哦～
