jquery+php后台实现省市区联动功能示例
2019/6/29 21:17:35
本文主要是介绍jquery+php后台实现省市区联动功能示例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例讲述了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后台实现省市区联动功能示例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习