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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jquery实现烟花效果(面向对象)
Mar 10 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
微信支付的开发流程详解
2016/09/13 PHP
零基础php编程好学吗
2019/10/11 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
java必学必会之static关键字
2015/12/03 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
Python玩转PDF的各种骚操作
2019/05/06 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
电气工程师岗位职责
2014/01/01 职场文书
公司同意接收函
2014/01/13 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
团委工作总结2015
2015/04/02 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL