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 相关文章推荐
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现简单评论区功能
Oct 26 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
ajax php 实现写入数据库
2009/09/02 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
bpython 功能强大的Python shell
2016/02/16 Python
python实现飞机大战
2018/09/11 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
在校生党员自我评价
2013/09/25 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
单位消防安全制度
2014/01/12 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
2014年校长工作总结
2014/12/11 职场文书
学生个人总结范文
2015/02/15 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
在python中读取和写入CSV文件详情
2022/06/28 Python