使用Axure設(shè)計三級聯(lián)動選擇器（如省市區(qū)選擇器）時，可以利用中繼器的數(shù)據(jù)存儲和動態(tài)交互功能來實現(xiàn)。下面介紹中繼器三級聯(lián)動選擇器設(shè)計的教程：

一、效果展示：

省市區(qū)選擇器.gif

1、在三級聯(lián)動選擇器中，首先選擇省份，省份下拉列表中的選項會根據(jù)數(shù)據(jù)集自動填充；

2、當(dāng)鼠標移動到省份選項后，城市下拉列表會自動更新，僅顯示與該省份相關(guān)的城市；

3、進一步當(dāng)鼠標移動到城市后，區(qū)縣下拉列表會更新為僅顯示所選城市的區(qū)縣；

預(yù)覽：https://fdsg8u.axshare.com

二、設(shè)計思路

1、利用中繼器存儲省、市、區(qū)三級數(shù)據(jù)，并通過數(shù)據(jù)集管理這些數(shù)據(jù)；

2、為省份、城市和區(qū)縣分別設(shè)置選擇器，作為用戶交互的界面元素；

3、當(dāng)下拉列表的選項改變時，觸發(fā)交互事件，根據(jù)選中的選項動態(tài)更新其他下拉列表的內(nèi)容；

4、通過中繼器的篩選功能，實現(xiàn)根據(jù)選中項動態(tài)更新下拉列表的效果。

三、關(guān)鍵步驟

1、添加中繼器并設(shè)置數(shù)據(jù)集：

三1.png

三2.png

三3.png

三4.png

從元件庫中拖入中繼器到畫布上,分別命名省級選擇中繼器、市級選擇中繼器、區(qū)級選擇中繼器；

省級選擇中繼器包括code、value兩列，市級/區(qū)級選擇中繼器包括code、value、pcode三列，code為省份編碼（關(guān)聯(lián)市級選項使用），value為顯示名稱，pcode為上級行政區(qū)劃編碼；

在數(shù)據(jù)集表格中，導(dǎo)入省份、城市、區(qū)縣數(shù)據(jù)。

2、配置省份下拉列表的交互：

三5.png

選中省份下拉列表，添加“鼠標移入時”的交互事件；

在交互事件中，使用篩選功能更新城市中繼器的數(shù)據(jù)，只顯示與選中省份對應(yīng)的城市；

同時，清空或重置城市和區(qū)域下拉列表的選項。

3、配置城市下拉列表的交互：

三6.png

選中城市下拉列表，添加“鼠標移入時”的交互事件；

在交互事件中，使用篩選功能更新區(qū)域中繼器的數(shù)據(jù)，只顯示與選中城市對應(yīng)的區(qū)縣；

同時，可以根據(jù)需要添加提示信息或驗證邏輯。

4、配置區(qū)域下拉列表（可選）：

三7.png

如果區(qū)域下拉列表只是用于顯示選中的區(qū)域名稱，則無需添加復(fù)雜的交互邏輯；

可以簡單地顯示選中的區(qū)域名稱，或根據(jù)需要添加其他交互效果。

5、優(yōu)化界面和測試交互：

根據(jù)設(shè)計需求，調(diào)整下拉列表和中繼器的布局和樣式；

在不同的省份、城市和區(qū)縣之間切換，確保三級聯(lián)動選擇器能夠正確地顯示和更新數(shù)據(jù)；

測試交互的流暢性和準確性，確保用戶能夠輕松完成省、市、區(qū)的選擇。

通過以上步驟，你可以使用Axure RP中的中繼器設(shè)計一個功能完善、交互流暢的三級聯(lián)動選擇器。這個選擇器可以應(yīng)用于各種需要地址選擇的場景，如電商平臺、數(shù)據(jù)篩選等。

關(guān)鍵詞：axure 三級聯(lián)動選擇 省市區(qū)選擇