Layui的省市区三级联动
PHP:
/**
* 通过接口获取省市区
* @param string $name
* @return json
*/
public function getDataTree($name = '')
{
try {
if (!empty($name)) {
$info = M("region")->field('id')->where(['name ' => $name])->find();
if (!empty($info)) {
$list = M("region")->field('name')->where('pid =' . $info['id'])->order('id asc')->select();
}
}
die(json_encode($list));
} catch (\Exception $e) {
$this->error($e->getMessage(),'',true);
}
}
HTML:
<select name="province" id="province" lay-verify="required" lay-filter="province" lay-search >
<option value="">--请选择或搜索--</option>
<option value="{$info.province}" selected>{$info.province}</option>
</select>
<select name="city" id="city" lay-verify="required" lay-filter="city" lay-search >
<option value="">--请选择或搜索--</option>
<option value="{$info.city}" selected>{$info.city}</option>
</select>
<select name="area" id="area" lay-verify="required" lay-filter="area" lay-search >
<option value="">--请选择或搜索--</option>
<option value="{$info.area}" selected>{$info.area}</option>
</select>
JavaScript:
function getArea(id,value){
$.ajax({
url: "{:U('getDataTree')}",
data: { name: value },
async: false,
dataType: 'json',
type: 'POST',
success: function (res, textStatus, jqXHR) {
if(value!='中国'){
$('#'+id).empty();
}
res.forEach(function(item, index){
$('#'+id).append(new Option(item.name, item.name));
});
form.render('select'); //加载select
}
})
}
//页面一打开就执行
layer.ready(function(){
getArea('province','中国');
});
//取得市级
form.on('select(province)',function(data){
getArea('city',data.value);
})
//取得区/县级
form.on('select(city)',function(data){
getArea('area',data.value);
})
其中,new option()的方法借鉴自同事生哥的代码。
Layui的省市区三级联动的更多相关文章
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
- 省市区三级联动 pickerView
效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...
- JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
- ajax省市区三级联动
jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...
- QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
- 省市区三级联动(二)JS部分简单版
通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...
- 从QQ网站中提取的纯JS省市区三级联动
在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...
- 基于ThinkPHP+AJAX的省市区三级联动
练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...
- java的JCombobox实现中国省市区三级联动
源代码下载:点击下载源代码 用xml存储中国各大城市的数据. xml数据太多了就不贴上了,贴个图片: 要解释xml,添加了一个jdom.jar,上面的源代码下载里面有. 解释xml的类: packag ...
随机推荐
- Java实现 LeetCode 217 存在重复元素
217. 存在重复元素 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 1: 输入: [1,2,3 ...
- SQL Server实现 LeetCode 176 第二高的薪水
176. 第二高的薪水 SQL架构 编写一个 SQL 查询,获取 Employee 表中第二高的薪水(Salary) . +----+--------+ | Id | Salary | +----+- ...
- 第九届蓝桥杯JavaA组省赛真题
解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.分数 题目描述 1/1 + 1/2 + 1/4 + 1/8 + 1/16 + - 每项是前一项的一半,如果一共有20项, 求这个和是多 ...
- Java实现提取拼音首字母
在很多软件中,输入拼音的首写字母就可以快速定位到某个词条.比如,在铁路售票软件中,输入: "bj"就可以定位到"北京".怎样在自己的软件中实现这个功能呢?问题的 ...
- java实现第五届蓝桥杯奇怪的分式
奇怪的分式 题目描述 上小学的时候,小明经常自己发明新算法.一次,老师出的题目是: 1/4 乘以 8/5 小明居然把分子拼接在一起,分母拼接在一起,答案是:18/45 (参见图1.png) 老师刚想批 ...
- 为什么需要云IDE?
一.云 IDE?是新概念吗? 不不不,早在 2010 年就有成熟的产品了:Cloud9 IDE 时至如今,云 IDE 已经相当常见了,比如: Cloud9:亚马逊为其云计算服务提供的 IDE Ecli ...
- centos 7 源码安装openssh
环境:centos 7.1.1503 最小化安装 依赖包下载: yum -y install lrzsz zlib-devel perl gcc pam-devel 1.安装openssl ,选用最 ...
- python自学Day04(自学书籍python编程从入门到实践)
第5章 if 语句 5.1 一个简单的示例 使用前面的解析列表构建一个0-9的数值列表. 判断0是否在列表中,如果在输出 0在列表A中 A = [i for i in range(0,10)] if ...
- Python快速入门文档
前言 此文本质为本人学习Python过程中的笔记,部分地方叙述表达可能不够清晰,欢迎留言. (本文适合有一定程序语言基础的读者阅读(最好是c语言)) 一.基本语法 1.框架: (1)以缩进表示层次所属 ...
- 由软件构造引申的OOP与POP的心得体会
在大一初学C语言的时候,所解决的问题都是一些轻量级的简单问题,当时写过一个教学管理系统.这个教学管理系统的功能很简单,思想就是“流水线”:按部就班的实现所有流程.要完成整个教学管理系统,实际上就是完成 ...