Dynamic Selection Practice
Technical Scenario: Dependent Dropdowns & Asynchronous Loading
- Event 1 (Page Load): `populateCategoryDropdown()` executes to fill the Category list.
- Event 2 (Category Change): `handleCategoryChange()` is triggered.
- The screen is immediately locked and visually frozen by the **Spinner (`showSpinner(true)`).**
- A 2-second timeout simulates the network fetch delay.
- After the delay, the relevant items are filtered, the **Item dropdown is refreshed**, and the spinner is hidden (`showSpinner(false)`).
- Event 3 (Item Change): `handleItemChange()` is triggered to retrieve the rate stored in the selected item's `data-rate` attribute and display it in the read-only Rate field.