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的省市区三级联动的更多相关文章

  1. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  2. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

  3. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  4. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  5. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  6. 省市区三级联动(二)JS部分简单版

    通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...

  7. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  8. 基于ThinkPHP+AJAX的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  9. java的JCombobox实现中国省市区三级联动

    源代码下载:点击下载源代码 用xml存储中国各大城市的数据. xml数据太多了就不贴上了,贴个图片: 要解释xml,添加了一个jdom.jar,上面的源代码下载里面有. 解释xml的类: packag ...

随机推荐

  1. Java实现 LeetCode 113 路径总和 II

    113. 路径总和 II 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 说明: 叶子节点是指没有子节点的节点. 示例: 给定如下二叉树,以及目标和 sum = ...

  2. Java实现 LeetCode 74 搜索二维矩阵

    74. 搜索二维矩阵 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例 1: ...

  3. Java实现第十届蓝桥杯质数

    试题 D: 质数 本题总分:10 分 [问题描述] 我们知道第一个质数是 2.第二个质数是 3.第三个质数是 5--请你计算 第 2019 个质数是多少? [答案提交] 这是一道结果填空的题,你只需要 ...

  4. java实现第四届蓝桥杯逆波兰表达式

    逆波兰表达式 正常的表达式称为中缀表达式,运算符在中间,主要是给人阅读的,机器求解并不方便. 例如:3 + 5 * (2 + 6) - 1 而且,常常需要用括号来改变运算次序. 相反,如果使用逆波兰表 ...

  5. Qt自动生成.rc文件并配置对应属性 程序图标 版本 描述等

    Qt项目配置文件pro里需要如下配置,进行qmake,build后会自动生成.rc文件,并将对应的信息写入文件中 VERSION = 1.0.0.1 RC_ICONS = "http.ico ...

  6. Redis系列(三):redisServer、redisDb、redisObject、sds四大结构体理解

    一.源码下载: Windows中的Redis源码下载:https://github.com/microsoftarchive/redis/tree/3.2 根据官网说明可知,用VS2013编译,但是必 ...

  7. Python按顺序读取文件夹中文件

    参考资料: https://blog.csdn.net/qq_22227123/article/details/79903116 https://blog.csdn.net/merdy_xi/arti ...

  8. TCP和UDP的Socket编程实验

    Linux Socket 函数库是从 Berkeley 大学开发的 BSD UNIX 系统中移植过来的.BSD Socket 接口是在众多 Unix 系统中被广泛支持的 TCP/IP 通信接口,Lin ...

  9. 使用LaTeX输入矩阵

    当前各种文本编辑器支持的LaTeX数学公式库大多基于KaTeX,或者在Web中用MathJax的比较多,下面给出一种在Web中输入矩阵的例子 $$\left[ \begin{array}{cccc}a ...

  10. android中获取其他应用的SharedPreferences

    在android中获取其他应用的SharedPreferences,需要其他应用设置的Mode为MODE_WORLD_READABLE或者MODE_WORLD_WRITABLE两种模式.要获取其他应用 ...