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 Easyui一些用法
Aug 01 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jquery自定义组件实例详解
Dec 31 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学习之 循环结构实现代码
2011/06/09 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
vue实现登陆登出的实现示例
2017/09/15 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
Python输出9*9乘法表的方法
2015/05/25 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
django 将model转换为字典的方法示例
2018/10/16 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
个人职业生涯规划书1500字
2013/12/31 职场文书
农民致富事迹材料
2014/01/23 职场文书
会计员岗位职责
2014/03/15 职场文书
心理咨询承诺书
2014/05/20 职场文书
检讨书范文500字
2015/01/28 职场文书
奖学金个人总结
2015/03/04 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers