axure 如何设置选项联动_Axure RP9案例：如何实现省市区数据的三级联动

| 概述

地区选择的使用场景非常广泛，比如电商类产品录入收件人地址的时候，需要选择省、市、区；再比如，在查询数据信息的时候，地区通常作为一个筛选条件。Axure 的下拉列表元件可以轻松实现单一层级的地区选择，但像省、市、区这样的三级联动选择，一个简单的下拉列表并不能解决我们的问题，如何让这个下拉列表框建立关系，保持数据联动，这就是本节课的案例需要解决的问题。

| 分析交互现象

默认情况下，省、市、区这三个下拉列表默认为空；

当我们下拉选择省份时，地市下拉列表的选项展示了该省份管辖范围的地市信息；

当我们选择地市时，区县下拉列表的选项展示位该地市管辖范围的区县信息。

分析完了交互现象，下面我们开始制作原型。

| 素材准备

第一步：从元件库拖动三个下拉列表至设计区域，分别作为省、市、区的内容

第二步：编辑省的选项为：广东、江苏

第三步：将市的下拉列表转换为动态面板，并为动态面板再复制两个状态。编辑第二个状态的下拉列表选项为广东的城市信息，如：请选择(默认不选择)、广州、深圳、韶关、东莞，状态命名为“广东”；编辑第三个状态的下拉列表选项为江苏的城市信息，如：请选择(默认不选择)、南京、苏州、无锡、常州、泰州、淮安，状态命名为“江苏”。

第一步：从元件库拖动三个下拉列表至设计区域，分别作为省、市、区的内容

第二步：编辑省的选项为：广东、江苏

第三步：将市的下拉列表转换为动态面板，并为动态面板再复