原型設計工具Axure RP入門教程（四）：動態設置Droplist選項教程

---

Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具， 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。

免費下載Axure RP 優惠購買Axure RP

---

在本教程中，您將學習如何根據第一個下拉列表中的選擇顯示第二個下拉列表中的不同選項。

注意：無法在單個Droplist窗口小部件中動態更改選項，因此此技術涉及創建第二個Droplist的多個版本，并使用多狀態動態面板在它們之間進行切換。

小部件設置

創建三個Droplist小部件

• 打開一個新的RP文件，然后在畫布上打開Page 1。
• 將三個下拉列表小部件拖到畫布上。命名一個下拉列表 Food Select，一個Hamburger，然后命名一個Hotdog。

主要Droplist的選項

• 雙擊Food Select 下拉列表以編輯其選項。
• 在出現的對話框中，單擊兩次Add以創建兩個新選項。做第一個Hamburger和第二個Hotdog。
• 單擊OK關閉對話框。

次要下拉列表的選項

• 給Hamburger下拉列表兩個選項：Cheese 和 No Cheese。
• 給Hotdog下拉列表兩個選項：Ketchup 和 Mustard， 和 Horseradish 和 Sauerkraut.。

將輔助下拉列表放置在兩個狀態的動態面板中

• 右鍵單擊Hamburger下拉列表，然后在上下文菜單中選擇Create Dynamic Panel（創建動態面板）。
• 在Outline（大綱）窗格中，將新動態面板的第一個狀態命名為Hamburger。
• 仍在Outline（大綱）窗格中，將光標懸停在動態面板小部件上，然后單擊右側的Add State（添加狀態）圖標。 將此新狀態命名為Hotdog。
• 仍在Outline（大綱）窗格中，選擇Hotdog下拉列表并將其拖動到右側以使其在Hotdog動態面板狀態下縮進。這會將其添加到該狀態并在畫布上打開該狀態。
• 將Hotdog下拉列表移到畫布上的（0,0）。
• 單擊畫布右上方的關閉，或按ESC退出狀態編輯模式。

當主下拉列表的選擇更改時，更改動態面板的狀態

• 選擇Food Select下拉列表小部件，然后在交互窗格中單擊New Interaction（新建交互）。
• 在出現的列表中選擇Selected Changed事件，然后選擇Set Panel State操作。
• 在目標下拉菜單中選擇動態面板。
• 在狀態下拉列表中，選擇值。 然后單擊出現的字段旁邊的fx圖標以打開Edit Value （編輯值）對話框。
• 刪除對話框上方字段中的文本，然后單擊Insert Variable or Function（插入變量或函數）。
• 在出現的下拉列表中，在小部件標題下選擇文本。 對話框的上方字段現在應顯示為[[This.text]]，它代表下拉列表當前顯示的選擇。

注意：可以將動態面板的狀態設置為Food Select下拉列表的選定選項，因為面板的狀態與下拉列表的選項名稱相同。

• 單擊OK關閉編輯值對話框，然后再次單擊OK以保存設置面板狀態操作。

預覽互動

• 預覽頁面。 默認情況下，在第一個下拉列表中選擇Hamburger，第二個下拉列表顯示相關的澆頭。
• 單擊第一個下拉列表，然后選擇Hotdog，第二個下拉列表中的選項應更改。

附加信息和提示

添加更多選項

使用此技術，您可以根據需要向主下拉列表添加盡可能多的選項。只需在動態面板中添加更多狀態，然后為每個狀態添加一個包含所需選項的下拉列表即可。確保將新的動態面板狀態命名為與主下拉列表中的新選項相同。

---

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。