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.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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 cli 小技巧
2013/06/03 PHP
laravel安装和配置教程
2014/10/29 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
python 计算数据偏差和峰度的方法
2019/06/29 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
python判断是空的实例分享
2020/07/06 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
python解包概念及实例
2021/02/17 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
面试后感谢信
2014/02/01 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
党员活动日总结
2014/05/05 职场文书
学生实习证明范文
2014/09/28 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
基石观后感
2015/06/12 职场文书
总经理年会致辞
2015/07/29 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python