三级联动下拉框,获取省市区信息(内附Oracle城市三级联动数据表)
来源:互联网 发布:spss如何转换数据 编辑:程序博客网 时间:2024/06/07 06:39
Oracle省市区三级联动数据表
Oracle省市区三级联动表:https://pan.baidu.com/s/1pK8TvSZ
使用环境,楼主使用B-JUI前段框架+freeMaker样式。SSM后端架构
样式和赋值方面可以自行修改,主要讲解一下思路:
楼主是点击按钮弹出dialog弹框进行添加操作用到的,省市区三级联动
在点击添加按钮时请求后台,进行查询所有地区信息
查询结果未Map集合,使用this.setAttribute(“p”, page);传到前端
得到的p对象的result属性是一个list集合,里面封装了查询出的所有地区信息AREA_NAME是地区名AREA_ID为地区ID
<div style="clear: both"> <p style="float:left;"> <label style="width:80px;"> 地区: </label> <select class="selectpicker" id="myc" style="width:75px;;" name="province" onchange="getNextArea(this)" selectvl_event="true" selectvl="${(info.province)!}" class="required"> <option value="">${(info.province)!"请选择"}</option> <#list p.results as pro> <option value="${(pro["AREA_ID"])!}">${(pro["AREA_NAME"]!)}</option> </#list> </select> <select data-rule="required" class="required" class="selectpicker" name="city" style="width:75px;;" id="comboxchcity" onchange="getNote(this)" selectvl_event="true" selecttext="${(info.city)!}" class="required"> <option value="请选择">${(info.city)!"请选择"}</option> </select> <select data-rule="required" class="required" class="selectpicker" name="district" style="width:75px;;" id="comboxcharea" selecttext="${(info.district)!}" class="required"> <option value="请选择">${(info.district)!"请选择"}</option> </select> </p> </div>
getNextArea(this)函数的参数表示,当前下拉框点击的地区对应的id
下面是点击的js
function getNextArea(obj){ var prent_id=$(obj).val(); if(prent_id!=""){ prent_id=prent_id.split(",")[0] $("#comboxchcity option:gt(0)").remove(); $("#comboxcharea option:gt(0)").remove(); $.post("/pay_backstage/enterpriseBase/getCity",{"code":prent_id},function(data){ $.each(data,function(i,v){ $("#comboxchcity").append("<option value='"+v["AREA_ID"]+"'>"+v["AREA_NAME"]+"</option>"); }); changeCheck("comboxchcity"); },"json"); }}
进行操作:先清除后两个下拉框的选中信息,
点击一级下拉框进行请求后台,传给后台一个当前选择的一级下拉框的菜单id,
post请求后台查询数据进行this.setAttribute(“p”, page);
然后给二级下拉框循环赋值(查询出的该地区下面的城市)
function getNote(obj){ var prent_id=$(obj).val(); if(prent_id!=""){ prent_id=prent_id.split(",")[0]; $("#comboxcharea option:gt(0)").remove(); $.post("/pay_backstage/enterpriseBase/getCity",{"code":prent_id},function(data){ $.each(data,function(i,v){ $("#comboxcharea").append("<option value='"+v["AREA_ID"]+"'>"+v["AREA_NAME"]+"</option>"); }); changeCheck("comboxcharea"); },"json"); }}
三级下拉框和二级原理相同。
阅读全文
0 0
- 三级联动下拉框,获取省市区信息(内附Oracle城市三级联动数据表)
- 省市区三级联动菜单(附数据库)
- 省市区三级联动菜单(附数据库)
- 省市区三级联动菜单(附数据库)
- 省市区三级联动菜单(附数据库)
- 省市区三级联动菜单(附数据库)
- 省市区三级联动菜单(附数据库)
- 三级联动(省市区)
- AJAX版省市区三级联动下拉框
- 三级联动 省市区下拉列表
- 前端省市区(县)三级联动下拉框
- jQuery表单省市区城市三级联动
- 省市区三级联动(新)
- 省市区三级联动(模板)
- 下拉框三级联动
- 三级联动下拉框
- 下拉框三级联动
- 三级联动下拉框
- SPRING的事务传播特性
- 单车不行玩电车,充电宝明年竟成骑车必备
- python 操作mysql
- Java输入/输出
- ios 绘制虚线 CGContextSetLineDash函数的参数
- 三级联动下拉框,获取省市区信息(内附Oracle城市三级联动数据表)
- java两个list中保存bean对象,找出其中某一属性不同的元素
- 使用creat-react-app构建react程序(react-scripts)
- 使用snownlp將繁體字装换成简体字
- 【java】变量
- itext基础
- 服务器TIME_WAIT和CLOSE_WAIT详解和解决办法
- 字符串里解析vue表达式
- java并发编程学习(六) 重排序和顺序一致性