第一步：昆明網站建設小編認為要準備好案例所需的水果圖像，見圖30，在【部件】面板中拖放一個動態面板部件到設計區域，雙擊動態面板，在彈出的【動態面板狀態管理】對話框中新增三個面板狀態，分別給這四個面板狀態命名為apple、banana、orange和grapes，給動態面板命名為fruits，見圖31，然后將準備好的4張水果圖像按照名稱分別導入4個對應的面板狀態，見圖32。

（圖30）

第二步：回到index頁面，在【部件】面板中拖放一個下拉列表框部件到設計區域，給其命名為fruits_selecotor，見圖33。

（圖31）

（圖32）

（圖33）

第三步：雙擊fruits_selector部件，在彈出的【編輯列表項】對話框中單擊【添加多個】，見圖34-A，然后在彈出的【添加多個】對話框中輸入如圖34-B所示內容。在此，昆明網站制作小編需要提醒注意，第一行只輸入一個空格即可，單擊兩次【確定】按鈕回到設計區域。

第四步：將 fruits動態面板設置為隱藏。

第五步：選中fruits_selector部件，在部件【屬性】面板中雙擊【選項改變時】事件，在彈出的【用例編輯器】頂部單擊【添加條件】，在彈出的【條件編輯器】中創建條件表達式【被選項this（this就是指當前所選部件）==空白選項】，見圖35，單擊【確定】按鈕關閉【條件編輯器】。

（圖34）

（圖35）

繼續，在【用例編輯器】中新增【隱藏】動作，在右側【配置動作】中勾選fruits動態面板，見圖36，單擊【確定】按鈕關閉【用例編輯器】。

第六步：再次雙擊【選項改變時】事件，在彈出的【用例編輯器】頂部單擊【添加條件】，在彈出的【條件編輯器】中創建條件表達式【被選項 this== 選項蘋果】，見圖37，單擊【確定】按鈕關閉【條件編輯器】。

（圖36）

（圖37）

繼續在【用例編輯器】中新增【設置面板狀態】動作，在【配置動作】中勾選fruits動態面板，并設置其選擇狀態為apple，勾選【如果隱藏則顯示面板】，見圖38。

（圖38）

第七步：在部件【屬性】面板中選擇Case2用例，復制后粘貼三次，然后對這三個用例中的條件和動作進行適當修改，修改后的用例見圖39。大多數情況下，我們都會復制重復度較高的用例，再進行適當修改，這樣可以節省大量工作時間。

（圖39）

第八步：在頂部的工具欄中單擊【預覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預覽交互效果。