Trying to filter out elements Javascript

I'm trying to filter certain films based on selections from the below dropdowns.

<select id="filmDropdown">
        <option value="0">All Films</option>
        <option value="1">Film 1</option>
        <option value="2">Film 2</option>
        <option value="3">Film 3</option>
    </select>

    <select id="dateDropdown">
        <option value="All">All Dates</option>
        <option value="Mon">Mon</option>
        <option value="Tues">Tues</option>
        <option value="Wed">Wed</option>
        <option value="Thurs">Thurs</option>
        <option value="Fri">Fri</option>
        <option value="Sat">Sat</option>
        <option value="Sun">Sun</option>
    </select>

 <input type="button" value="Search" onclick="getSelectedValues()" />

And here's the html for the films to be selected.

    <div id="allFilms">

        <div id="1" class="filmTag">
            Film 1
            <p>
                Mon
            </p>
            <ul>
                <li>12:00</li>
                <li>16:00</li>
            </ul>
            <p>
                Wed
            </p>
            <ul>
                <li>19:00</li>
            </ul>
        </div>

        <div id="2" class="filmTag">
            Film 2

            <p>
                Tues
            </p>
            <ul>
                <li>12:00</li>
                <li>16:00</li>
                <li>18:00</li>
            </ul>
        </div>

        <div id="3" class="filmTag">
            Film 3

            <p>
                Wed
            </p>
            <ul>
                <li>12:00</li>
                <li>16:00</li>
            </ul>
        </div>

    </div>

I'm trying to use Javascript to hide all the films other than the one selected. This is what I'm doing but it doesn't seem to pick up the selected film and will just hide everything.

<script>
        function getSelectedValues() {

            var f = document.getElementById("filmDropdown");
            var selectedFilm = f.value;

            if (selectedFilm !== 0) {

                var filmClass = document.getElementsByClassName("filmTag");

                for (var i = 0; i < filmClass.length; i++) {

                    if (filmClass.id === selectedFilm) {
                        filmClass[i].style.display = "block";
                    }
                    else {
                        filmClass[i].style.display = "none";
                    }
                }
            }
        }
    </script>