View the step-by-step solution to:

I'm having a JavaScript issues. So what I'm trying to do is have my first drop down window have different food options and once their clicked it...

I'm having a JavaScript issues. So what I'm trying to do is have my first drop down window have different food options and once their clicked it would populate specific items in the second menu. Right now I have nothing appearing in my drop down menus, any assistance would be appreciated.


<html lang="en">
<head>
<title>The J-Money Experience</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/pacific.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<script>

    function getFoodGroups(){
    
    foodGroups= ["Meats", "Fruits", "Vegetables", "Fish", "Mystery Box =)"];
    
    return foodGroups;
    }


        
    function getFoods(foodGroups){
    foods ="";
    switch(foodGroups){
        case "meats":
            foods = ["Chicken", "Pork", "Turkey", "Roast Beef", "Elk"];
            break;
        case "fruits":
            foods = ["Apricot", "Banana", "Blackberry", "Blueberry", "Avocado"];
            break;
        case "vegetables":
            foods = ["Broccoli", "Spinach", "Tomato", "Onion", "Cabbage"];
            break;
        case "fish":
            foods = ["Salmon", "Mackerel", "Sardines", "Tuna", "Trout"];
            break;
        case "mysteryBox":
            foods = ["Twinkie", "Ding Dongs", "HoHos", "Sno Balls", "Honey Buns"];
            break;
    }
    
    return foods;
}
    
    function populateFoods(){  
    selFoods = document.getElementById("selFoods");
    selFoodGroups = document.getElementById("selFoodGroups");
        
    FoodGroups = "";
    
    for(i=0;i<selFoodGroups.option.length;i++){
        if(selFoodGroups.options[i].selected==true){
            foodGroups=selFoods.options[i].value;
            break;
        }
    }



    function populateFoodGroups(){
    foodGroups = getFoodGroups();
    
    selFoodGroups = document.getElementById("foodGroups");
    selFoodGroups.options.length=0;
    
    for(x=0;x<FoodGroups.length;x++){
        newOpt = document.createElement("option");
        newOpt.value=needs[x];
        newOpt.innerHTML=needs[x];
        
        selFoodGroups.appendChild(newOpt);
    }
    
} 


        function initPage(){
    mySelect = document.getElementById("selFoodGroups");
    myTeams = getFoodGroups();
    
    for(i=0;i<foods.length;i++){
        
        newOpt = document.createElement("option");
        newOpt.value=foods[i];
        newOpt.innerHTML=foods[i];
        
        selFoods.appendChild(newOpt);
    }
}
    
</script>
</head>
<body onload="initPage();">
<div id="wrapper">
<header>
<h1>The J-Money Experience</h1>
</header>
<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
    </ul>
    </nav>
    <div id="homehero"></div>
<main>

<h2>Pick Your Posion</h2>
    

    <select id="selFoodGroups" onchange="populateFoods();">
        
    </select>
    <br/>
    <select id="selFoods">
    
    </select>

    

    
</main>
<footer>
Copyright &copy; 2018 King Justin Corp.<br>
</footer>
</div>
</body>
</html>


Top Answer

Changes: Elements of FoodGroups array should be same as in the switch case of getFoods() function. Otherwise the... View the full answer

jsdropdown-o1.JPG

Sign up to view the full answer

Why Join Course Hero?

Course Hero has all the homework and study help you need to succeed! We’ve got course-specific notes, study guides, and practice tests along with expert tutors.

-

Educational Resources
  • -

    Study Documents

    Find the best study resources around, tagged to your specific courses. Share your own to gain free Course Hero access.

    Browse Documents
  • -

    Question & Answers

    Get one-on-one homework help from our expert tutors—available online 24/7. Ask your own questions or browse existing Q&A threads. Satisfaction guaranteed!

    Ask a Question
Ask a homework question - tutors are online