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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery实现上传图片功能
Jun 29 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jQuery插件实现图片轮播效果
Oct 19 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
其他功能
2006/10/09 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
python write无法写入文件的解决方法
2019/01/23 Python
python频繁写入文件时提速的方法
2019/06/26 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
Python利用命名空间解析XML文档
2020/08/10 Python
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
给老婆的搞笑检讨书
2014/01/12 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript