下拉選單(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)互動設計-控制換頁。

---