Implement Linked Lists for Dynamic Dropdown Filtering

As a user of the SafetyCulture, I want the dropdown lists to be dynamically linked,
so that selecting an option in one dropdown filters the options available in a subsequent dropdown to show only relevant items.

Description:

Currently, the application provides several dropdown menus that are used to input various health and safety parameters. However, these dropdowns are static and do not dynamically filter based on previous selections. This enhancement request aims to improve the user experience by implementing linked lists functionality, ensuring that selections in the first dropdown influence the available options in subsequent dropdowns.

Acceptance Criteria:

1. Dropdown A: Selecting an item in the first dropdown (Dropdown A) will dynamically filter the available options in the second dropdown (Dropdown B).

   • Example: If Dropdown A is "Hazard Type" with options "Chemical," "Biological," and "Physical," selecting "Chemical" should filter Dropdown B to show only "Chemical" hazard controls.

2. Dropdown B: The options in the second dropdown should reflect only the items relevant to the selected option in Dropdown A.

   • Example: If "Chemical" is selected in Dropdown A, Dropdown B might show "Spill Kit," "Ventilation," and "Gloves." If "Biological" is selected, Dropdown B might show "Biohazard Bag," "Disinfectant," and "Gloves."

3. Dynamic Filtering: The system must dynamically update Dropdown B without requiring a page reload. The filtering should be seamless and instantaneous.

4. Usability: The user interface should clearly indicate the dependency between the dropdowns, ensuring users understand that selections in Dropdown A affect Dropdown B.

5. Error Handling: If no options are available in Dropdown B for a selected item in Dropdown A, a friendly message should inform the user that no relevant options are available.

6. Data Integrity: Ensure that all filtered lists are accurate and up-to-date based on the underlying data relationships.

7. Compatibility: This functionality should be compatible with all major browsers and the existing framework of the application.

Priority: High

Mockup/Example:

1. Dropdown A (Hazard Type):

   • Chemical
   • Biological
   • Physical

2. Dropdown B (Hazard Controls):

   • If "Chemical" is selected: Spill Kit, Ventilation, Gloves
   • If "Biological" is selected: Biohazard Bag, Disinfectant, Gloves
   • If "Physical" is selected: Safety Guard, Ear Protection, Safety Glasses

By implementing this functionality, users will benefit from a more intuitive and efficient data entry process, reducing errors and improving the overall usability of the health and safety software.