ionic+AngularJs项目中实现三级联动效果，筛选省份、城市、区县

最新推荐文章于 2021-03-29 18:44:07 发布

xiaojun_zxj

最新推荐文章于 2021-03-29 18:44:07 发布

阅读量9.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： AngularJs ionic

本文链接：https://blog.youkuaiyun.com/xiaojun_zxj/article/details/48052507

这篇博客介绍了如何在使用Ionic和AngularJS构建的项目中实现三级联动效果，即筛选省份、城市和区县的功能。文章通过展示HTML页面的代码结构和控制器中的逻辑实现，详细阐述了这一过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">建议对ionic和AnjularJs有一定了解的人可以用到，很多时候我们要用到选择省份、城市、区县的功能，现在就跟着我来实现这个功能吧，用很少的代码（我这里是根据客户的要求，只显示想要显示的部分省份和其相对应的城市、区县，并且这些数据将通过后台放入数据库，并没有引用完整的城市js）</span>

1.首先在所需要的HTML页面需要这些代码，其中的样式都是自己定义的，不喜欢的可以按照自己喜好来写：

<div class="list">
            <div class="list" style="border: 0;">
                <label class="item item-input item-select" style="border: 0">
                    <div class="input-label">
                        <span><span style="color: #6e6e6e"> </span></span>
                    </div>
                    <select style="font-size: 16px" ng-model="data.currentProvinceId"
                            ng-options="pp.Id as pp.RegionName for pp in allProvinces"
                            ng-change="switchProvince(data.currentProvinceId)">
                    </select>

                </label>
            </div>
            <div class="list" style="border: 0">
                <label class="item item-input item-select" style="border: 0">
                    <div class="input-label">