开发工具: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);}});}
琢磨了大半天,写个博客纪念一下(^_^)
希望能帮到你哦~