jquery+php后台实现省市区联动功能示例


Posted in jQuery onMay 23, 2019

本文实例讲述了jquery+php后台实现省市区联动功能。分享给大家供大家参考,具体如下:

JS:

$("#from_prov_id,#from_city_id").change(function () {
    var current_prov_id = $(this).val();
    var _this = this;
    $.ajax({
      type:'get',
      url:"{:url('getarea')}?id="+current_prov_id,
      success:function (data) {
        var data = JSON.parse(data);
        if (data.list2==''){
          $('#from_area_id option').remove();
          $("#from_area_id").append( '<option value="">选择区(县)</option>');
          $.each(data.list1,function (index,item) {
            $("#from_area_id").append( '<option value="'+item.id+'">'+item.name+'</option>');
          });
        }else{
          $("#from_city_id option").remove();
          $('#from_area_id option').remove();
          $("#from_city_id").append( '<option value="">选择城市</option>');
          $.each(data.list1,function (index,item) {
            $("#from_city_id").append( '<option value="'+item.id+'">'+item.name+'</option>');
          });
          $("#from_area_id").append( '<option value="">选择区(县)</option>');
          $.each(data.list2,function (index,item) {
            $("#from_area_id").append( '<option value="'+item.id+'">'+item.name+'</option>');
          });
        }
      }
    })
});

html:

<select name="from_prov_id" id="from_prov_id" class="select">
    <option value="">选择省份</option>
      <option value="id">北京</option>
      <option value="id">上海</option>
      <option value="id">浙江</option>
      <option value="id">四川</option>
      <option value="id">山西</option>
      <option value="id">江苏</option>
    {/volist}
</select>
<select name="from_city_id" id="from_city_id" class="select">
    <option value="">选择城市</option>
</select>
<select name="from_area_id" id="from_area_id" class="select">
    <option value="">选择区县</option>
</select>

php:

public function area(){
    $area = new Area();
    $id = input('id');
    $list = $area->getList(['pid'=>$id]);
    $list2 = $area->getList(['pid'=>$list[0]['id']]);
    return json_encode(['list1'=>$list,'list2'=>$list2]);
}

另外,本站在线工具小程序上也有几款工具采用了省市区联动功能,感兴趣的朋友可以扫描如下小程序码查看:

jquery+php后台实现省市区联动功能示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery实现计算器功能
Oct 19 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
jQuery Migrate 插件用法实例详解
May 22 #jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 #jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 #jQuery
Vue项目中使用jquery的简单方法
May 16 #jQuery
JQuery常见节点操作实例分析
May 15 #jQuery
JQuery属性操作与循环用法示例
May 15 #jQuery
You might like
一些常用的php简单命令代码集锦
2007/09/24 PHP
二招解决php乱码问题
2012/03/25 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
对Python中画图时候的线类型详解
2019/07/07 Python
Python切图九宫格的实现方法
2019/10/10 Python
python deque模块简单使用代码实例
2020/03/12 Python
详解Python 中的容器 collections
2020/08/17 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
医药代表个人的求职信分享
2013/12/08 职场文书
会计实习生自我鉴定
2013/12/12 职场文书
销售人员获奖感言
2014/02/05 职场文书
高中生的自我评价
2014/03/04 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
房产公证书样本
2015/01/23 职场文书
2014年终个人总结报告
2015/03/09 职场文书
道歉信怎么写
2015/05/12 职场文书
学者《孟子》名人名言
2019/08/09 职场文书