layui城市三级联动(fesiong / layarea)
安装
GitHub下载地址:https://github.com/fesiong/layarea.git
使用(html+js)
1. html部分
整个选择器需要使用一个父标签包裹,如下使用了id="area-picker",并且分别给省、市、区的select加上province-selector、city-selector、county-selector,用来区分对应的内容标签,这里也可以自定义lay-filter,当一个页面有多个省市区选择器的时候,需要每组lay-filter命名不一样,因此,最好的方式是,不手动设置lay-filter。每个select可以指定初始值,在select上写data-value=""即可。初始值也可以通过js设置。
<div class="layui-form-item" id="area-picker">
<div class="layui-form-label">网点地址</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
<option value="">请选择区</option>
</select>
</div>
</div>
2. js部分
引入layarea, 根据指定选择器渲染标签
//配置插件目录
layui.config({
base: './mods/'
, version: '1.0'
});
//一般直接写在一个js文件中
layui.use(['layer', 'form', 'layarea'], function () {
var layer = layui.layer
, form = layui.form
, layarea = layui.layarea;
layarea.render({
elem: '#area-picker',
// data: {
// province: '广东省',
// city: '深圳市',
// county: '龙岗区',
// },
change: function (res) {
//选择结果
console.log(res);
}
});
});
layui城市三级联动(fesiong / layarea)的更多相关文章
- 全国城市三级联动 html+js
全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...
- jquery 城市三级联动
js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- 城市三级联动 AJAX-原生js封装
话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...
- layui省市区三级联动城市选择
基于layui框架制作精美的省市区下拉框三级联动菜单选择, 支持三级联动城市选择,点击提交获取选中值代码. 示例图如下: 资源链接: https://pan.baidu.com/s/1s6l8iDBE ...
- JS全国城市三级联动
HTML <select id="s_province" name="s_province"></select> <select ...
- 使用mint ui 的picker解决城市三级联动
<mt-popup v-model="popupVisible" position="bottom"> <div class="po ...
- vue 选城市三级联动
<div id="example"> <select v-model="prov"> <option v-for="op ...
- vue父组件获取子组件页面的数组 以城市三级联动为例
父组件调用子组件 <Cselect ref="registerAddress"></Cselect> import Cselect from '../../ ...
随机推荐
- python自带缓存lru_cache用法及扩展(详细)
本篇博客将结合python官方文档和源码详细讲述lru_cache缓存方法是怎么实现, 它与redis缓存的区别是什么, 在使用时碰上functiontools.wrap装饰器时会发生怎样的变化, ...
- 题解-Happy New Year
题解-Happy New Year Happy New Year 给定 \(n\),\(m\) 和 \(k\).有一个序列 \(a\{m\}\) 初始值为 \(0\).有 \(n\) 种操作,每种可以 ...
- Python之Windows服务
1.首先要安装pywin32-220.win-amd64-py2.7.exe 2. SvcDoRun:服务启动的时候会执行的方法 SvcStop:服务停止的时候会执行的方法 # coding=utf- ...
- Sharding-JDBC分库分表简单示例
1. 简介 Sharding是一个简单的分库分表中间件,它不需要依赖于其他的服务,即可快速应用在实际项目的分库分表策略中. 2. 初始化数据库(db0.db1.db2) 1 #创建数据库db0 2 C ...
- LLVM程序分析日记之 basic blocks could have duplicate predecessors
We used the predecessors() to get the predecessors of a basic block based on LLVM's IR. The code is ...
- 工作三年!全靠大佬的Java笔记,年底跳槽阿里涨了10K
前言 不论是校招还是社招都避免不了各种⾯试.笔试,如何去准备这些东⻄就显得格外重要,之前8月底阿里的人事部门打电话叫我要不要面试,当时正处于换工作的期间,于是就把简历发给阿里hr,人事审核后经过一些列 ...
- 题解洛谷P1538【迎春舞会之数字舞蹈】
方法:暴力,判断,输出 本题为了更好理解建议各位可以复制样例来研究,甚至可以复制题解来测试思想,相信大家不会抄. 有什么不好的请大佬们在评论里指出,谢谢 #include <bits/stdc+ ...
- CVE-2019-0708——RDP漏洞利用
影响系统:windows2003.windows2008.windows2008 R2.windows xp .win7环境:攻击机:kali ip:192.168.40.128靶机:windows ...
- 2020年“感恩杯”台州学院第十三届大学生程序设计竞赛D、H、I题解(后续补充)
D题:小z与他的袜子 描述 小z每天会穿一双新袜子. 开始他的衣柜里有n双袜子,袜子会从1-n进行编号.每天早上他都会从衣柜里拿编号最小的袜子来穿.每天晚上他会把今天穿的袜子扔进篮子里,如果篮子里有n ...
- 小白数据分析——Python职位全链路分析
最近在做Python职位分析的项目,做这件事的背景是因为接触Python这么久,还没有对Python职位有一个全貌的了解.所以想通过本次分析了解Python相关的职位有哪些.在不同城市的需求量有何差异 ...