网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

本文实例讲述了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')}"+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表单(form)操作技巧总结》、《jquery数组用法总结》、《jQuery遍历算法与技巧总结》、《jQuery切换特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇:Node.js+ELK日志规范的实现
下一篇:js尾调用优化的实现
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap