CSCI-E3: Project Unit3b - Select Menu

How to respond to a selection menu being changed.

by Ramya Ranganathan

HTML

<select id="selectMenu" name="movieTrilogy">
    <option value="0">No movie selected</option>
    <option value="1">Star Wars</option>
    <option value="2">The Lord of the Rings</option>
</select>
<ul id="trilogyList">
    <li>No trilogy</li>
</ul>

JavaScript

var trilogies= [
    ['No trilogy'],
    ['A New Hope', 'The Empire Strikes Back', 'Return of the Jedi'],
    ['The Fellowship of the Ring', 'The Two Towers', 'The Return of the King']
];

function createTrilogyList () {
    console.log("Value: " + this.selectedIndex);
    
    var selection = this.selectedIndex
    // Remove elements from trilogy list
    var list = document.getElementById("trilogyList");
    list.innerHTML = '';
    
    // For each movie in the selected trilogy list,
    // add LI elements
    for (var i = 0; i < trilogies[selection].length; i++) {
        var newLI = document.createElement("LI");
        var text  = document.createTextNode(
            trilogies[selection][i]
        );
        newLI.appendChild(text);
        list.appendChild(newLI);
    }
        
    
        
}

document.getElementById("selectMenu").onchange = createTrilogyList;