jquery+php后台实现省市区联动功能示例

2019-11-19 11:29:20

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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]);}

另外，本站在线工具小程序上也有几款工具采用了省市区联动功能，感兴趣的朋友可以扫描如下小程序码查看：