下拉選單(droplist)互動設計-控制另一個下拉選單

說明：

在同一頁面，有2 個下拉選單- A 和 B。下拉的選項分別各有 2 個- a1, a2, b1, b2。

互動設計要做到的效果：
當 A 選擇 a1 時，B 自動變為 b1
當 A 選擇 a2 時，B 自動變為 b2

　》瀏覽這個範例的Prototype
　》下載這個範例的RP檔(下載後請解壓縮)
　》教學影片-以下拉選單(droplist)來控制換頁 1分24秒

作法：

詳細教學請參考　》教學影片-以下拉選單(droplist)來控制換頁 1分24秒。

當Droplist物件遇到OnChange的觸發Event時 (請留意不是 OnClick )，新增互動設計的Case。

新增Case之後，設定符合條件的狀況 – 在 『Add Condition』 (或 『Edit Condition』)的窗格，選擇 selected option of A 等於 a1。

接著，定義正確的互動Action – 在 『Set Variable and Widget value(s) equal to Value(s) 』 的窗格中，選擇 Set selected option of B 到 b1。

完成後的互動設計的statement如下:

OnChange:
Case 1 (If selected option of A equals 『a1″):
Set selected option of B equal to 『b1″
Case 1 (Else If selected option of A equals 『a2″):
Set selected option of B equal to 『b2″

類似的教學範例可參考 – 下拉選單(droplist)互動設計-控制換頁。

---