: 5px; 4 border: 1px solid #00ff00; 5 } JavaScript: 1 // 省市区联动函数...* 定义四个参数 6 * 省的id:provinceId 7 * 市的id:cityId 8 * 区的id:areaId 9 * 保存省市区的对象
这个是一个layui省市区三级联动插件,近来使用layui后台模板框架开发后台系统,要用到省市县/区三级联动,本想从网上找个现成的轮子,然没有自己想要的需求,就自己造了个。...本插件实现省市区相应数据通过ajax动态从服务端加载数据,省市区数据结构key-value形式。.../layui/layui.js"> layui.config({ base...如只想显示二级联动,可将以下代码注释....> 请选择县/区 js
最近项目,需要用到三级联动,在网上找了一些例子,进行了修改,实现,提炼出来了给大家分享 实现思路是在三个wheelview 进行联动。选择了省,马上就关联到市和区,选择了市 ,马上就可以关联到区。
areaList" @confirm="confirmFn" :columns-placeholder="['请选择', '请选择', '请选择']" title="选择所在省市区..." /> js2.0/vue/...v2.5.16/vue.js"> js"> js"> ...show: false, areaList: are, }, mounted() { console.log("省市区
效果图 省市区的Json数据 下载链接 js2.0/city-data/city-data.js">... 省市区的Json格式 也可以去github下载省市区的JSON格式 <el-cascader v-model="area" :options="areaList" :props
省市区三级联动选择是个很频繁的需求,但是查看了市面上很多插件不是太老不维护就是不满足需求,就试着实现一个 这个功能无任何依赖插件 功能略简单,但能实现需求 核心代码也尽力控制在了60行左右...pca-code.json树型数据来源 Administrative-divisions-of-China 下面只贴了省市区选择的功能,全部代码可参考github area分支 import {...assets/pca-code.json" export default () => { const [selected, setSelected] = useState([]) //选择过的省市区
index.js import { getCity } from '../...../api/api.js'; data: { region: ['省', '市', '区'], valueRegion: [0, 0, 0], id:0,//地址id...break; } this.setData({ multiArray: multiArray, multiIndex: multiIndex}); } api.js...{ return request.get('service/xcx/city_list', { }, { noAuth: true }); } 对应php代码【tp6】 /** * 获取省市区
通过自定义Admin的模板文件实现省市区的三级联动.要求创建记录时,根据省>市>区的顺序选择依次显示对应数据. 修改记录时默认显示已存在的数据....list_display = ('name', 'province', 'city', 'district') change_form_template = 'area.html' 这里需要写一个form将省市区这三个字段显示为单选框...text/javascript" id="django-admin-form-add-constants" src="{% static 'admin/js.../change_form.js' %}" {% if adminform and add %} data-model-name="{{ opts.model_name
前言 最近收到客服反应,系统的省市区数据好像不准,并且缺了一些地区。经过询问同事得知,数据库内的数据是从老项目拷贝过来的,有些年头了。难怪会缺一些数据。...正好最近在对接网商银行,发现网商提供了省市区的数据的接口。这就很舒服了哇,抄起键盘就是干,很快的就把同步程序写好了。 然后在同步的过程中,发现网商提供的数据和数据库有些对不上。...return String.valueOf(Integer.parseInt(areaCode) / 100 * 100); } } } 数据修正 由于我们需要的是省市区三级数据联动
地址管理之省市区三级联动菜单 三级联动表单 导入省市区的数据 下载sql语句的文件 在数据库中执行:source 文件路径即可导入 导入成功之后,在数据库中会出现三张表,分别代表省,市,区 创建实体类...获取获取所有的省份信息 根据选择的省份传回的省份编号查询所有的城市信息 根据选择的城市传回的城市编码查询所有的县区的信息 新建DictMapper接口 完成上面的三个功能,因此需要定义三个方法 /** * 省市区的接口...获取获取所有的省份信息 根据选择的省份传回的省份编号获取所有的城市信息 根据选择的城市传回的城市编码获取所有的县区的信息 在cn.tedu.store.service中新建IDictService接口 /** * 省市区的业务接口...getAreas(String cityCode); } 在cn.tedu.store.service中新建DictServiceImpl实现类 使用@service注解来控制反转,新建对象 /** * 省市区的业务实现类...ResponseBody 在cn.tedu.store.controller中新建一个DictController类 使用@Controller注解 使用@RequestMapping /** * 省市区的
地址选择一般都是三级联动,但遇到产品经理一切“一般”全扯淡。。 产品:那个XXX ---地址选择来个四级联动带街道的选择器。。。 XXX:这个三级的就行了吧,街道自己写吧。 产品:不行!!!!
就是可插拔性高,组件化,想要就用,不要用拉倒,直接删除就行 什么是功能化设计,就是一个简单的功能,实现想要的效果,但是不够通用化,别人要用的话需要读懂你的代码,还需要复制黏贴很多代码这样效率不高 今天写了一个省市区三级联动的模块...主要使用到的技术:jquery,redis,springMVC,MyBatis(springMVC和MyBatis无所谓,你用struts或者hibernate或者spring data都行) 首先页面引入js...初始化JS: ? 后台controller: ? service: ? 如果需要默认选中那么只需要对这3个参数赋值即可: prov:"江苏省", city:"无锡市", dist:"南长区", ?...对于省市区的数据源,可以存放在数据库表中,也可以直接存入js,作为一个json来调用即可 如果没有省市区可以淘一下万能的X宝
在一些和会员相关的注册系统中,让用户输入省市信息是非常常见的行为,并且一般都是要求做到省市区联动下拉效果,今天就给大家推荐一个 jQuery 插件 CitySelect,通过 JSON 数据实现省市联动效果...: CitySelect 演示: CitySelect 使用 首先在head中载入jquery库和cityselect插件。...js/jquery.js"> js/jquery.cityselect.js...注意如果只想实现省市二级联动,则去掉第三个dist的select即可。...,直接调用: $("#city").citySelect(); 自定义参数调用,设置默认省市区。
Ajax实现省市区三级联动 思路: (1)首先获取省份信息 (2)发起Ajax请求,注意dataType中的T大写 (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建option...doctype html> 2 3 4 5 省市区三级联动js"> 28 29 $(function() { 30...DOCTYPE html> 2 3 4 5 省市区三级联动</title...'callback']; 6 $flag = $_GET['flag'];//标志位,用来区分是省市区哪个 7 //查询省市区对应的列表数据 8 if($flag == 1){ 9 $query
v-distpicker 使用说明 下拉菜单选择省市区 第一步: 安装v-distpicker npm install v-distpicker -s 第二步: 在main.js中引入 //...省市区插件 import VDistpicker from 'v-distpicker' Vue.component('v-distpicker', VDistpicker) 第三步: 在vue的组件中使用...province: "江西省", city: "", area: "" }, /// 当值是中文的时候,要完整的省份名称,比如"江西省,不能给 "江西 } } * 事件绑定 获得选择好的的省市区的...console.log(val); console.log(val.city.code); // 打印出城市的code }, 优点: 支持通过code来显示省市区的中文...实际开发过程中,会接收后台返回的code用于显示当前的省市区的名称,当用户不做任何修改的时候又要把当前的code发送给后台。
创建 provider 终端运行: ionic g provider city-data 省市区json文件下载地址: https://raw.githubusercontent.com/raychenfj
Picker 级联选择器 基于 Framework7 制作级联选择器比较简单,关键是生成省市区数组以及省市区之间的联动。...1.无子父级关系的数组 去年做项目时省市区数据并没有从接口读取,而是保存到一个 JS 文件中。...以下是省市区选择器的完整配置,联动效果需要使用上面提到的循环方法。所有的演示文件以及省市区 JSON 文件都上传到了 GitHub 。...'北京市'), area = getArea(regions, '北京市', '北京市'); // 保存 picker 选择的省 var provinceSelect = ''; // 省市区联动...如果有需要的话,我也会考虑把它封装成一个插件。
在一些需要填写地址的前端页面中,总是少不了需要填写地址的级联选择器,类似这样的:在某依框架中,是直接把省市区的地址和编码放在了数据库里。个人觉得还是很头疼的:sql写起来麻烦。...当然是有的,前端就有这样的一个库:npm install element-china-area-data具体的使用可以参考对应的官方文档或者博客vue+Element UI 实现中国省市区三级联动。...在gitee上找到了这个项目:中国省市区数据。这个json文件里就是全部的json数据:具体的数据选择,也可参考官方文档:中国省市区数据项目。...selectedOptions: [], addrCodes: [], addrCodesSelected: [], } }, methods: { // 获取省市区地址级联
实例 查看实例 HTML中使用js实现多级列表联动-实例省级列表联动 省级列表多级联动
本文描述的省份和城市二级联动下拉菜单,在js部分设置省份和城市信息,当然也可以将数据保存在数据库中,当需要使用的时候在读取。...这里用的是js原生代码 在html文件中设置省份、城市下拉列表如下: <select id="pro" onchange="addCity();"...province.length;i++) if(province[i]==pro.value) return i; } //根据获取的省份下标,更改二级列表为对应下标的城市列表,此即二级联动...var i = 0; i < city[index].length; i++) e.add(new Option(city[index][i])); } 二级联动的应用在日常...一一对应 g=b[index],g与index也一一对应 这样当更改y的值时,index随之改变,也就改变了g的值,使得y与g一一对应,此即二级联动的实现原理