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]);}

另外，本站在線工具小程序上也有幾款工具采用了省市區聯動功能，感興趣的朋友可以掃描如下小程序碼查看：