Reference no: EM133234685

[{"animal_id":4,"animal_type":"dog","animal_breeds":[{"breed_id":1,"breed_name":"Beagle"},{"breed_id":2,"breed_name":"Poodle"},

"breed_id":3,"breed_name":"Hound"},{"breed_id":4,"breed_name":"Collie"}]},{"animal_id":7,"animal_type":"cat","animal_breeds"

[{"breed_id":1,"breed_name":"Tabby"},{"breed_id":2,"breed_name":"Calico"},{"breed_id":3,"breed_name":"Persian"}]}

{"animal_id":11,"animal_type":"bat","animal_breeds":[{"breed_id":1,"breed_name":"Hoary"},{"breed_id":2,"breed_name":"Egyptian Fruit"},{"breed_id":3,"breed_name":"Spotted"},{"breed_id":4,"breed_name":"Leaf-nosed"}]}

{"animal_id":17,"animal_type":"rat","animal_breeds":[{"breed_id":1,"breed_name":"Sewer"},{"breed_id":2,"breed_name":"Bilge"}

{"breed_id":3,"breed_name":"Dirty"}]}]';

The animal types should be listed in a dropdown menu when the page first loads. Use javascript only.

1. Dynamically generate menus using DOM factory methods. The first menu is generated when the page loads, the second one when choices are made from the first.

2. The menu should have an onchange event handler that causes a second menu for the breeds of the selected animal to suddenly appear (Conjured out of thin air!). Use DOM factory methods to create the breeds menu on-the-fly.

3. Make sure that re-choosing the dummy item in the first menu removes the breeds menu, and that choosing a different animal will re-create the second menu.

4. You must use the Animal IDs as the hidden values of the first menu's options. In a real application, this data would come from a database query, and the IDs would be primary keys from the database records.

5. When a choice is made from the first menu, you must console.log() the chosen menu option so I can see it - both the hidden value AND the text of the chosen option. Making sure you are correctly identifying the first menu choice is the best way to get started. Then all you need to worry about is using that to build the 2nd menu.