试图过滤掉Javascript元素

我试图根据以下下拉列表中的选择筛选某些电影

<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()" />

所有电影
电影1
电影2
电影3
所有日期
周一
周二
结婚
星期四
星期五
坐
太阳

这是要选择的电影的html

    <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>

电影1

周一


12:00
16:00


结婚


19:00

电影2

周二


12:00
16:00
18:00

电影3

结婚


12:00
16:00

我正在尝试使用Javascript隐藏除所选电影之外的所有电影。这是我正在做的，但它似乎没有拿起选定的电影，将只是隐藏一切

<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>

函数getSelectedValues（）{
var f=document.getElementById（“filmDropdown”）；
var selectedFilm=f.值；
如果（已选择胶片！==0）{
var filmClass=document.getElementsByClassName（“filmTag”）；
对于（var i=0；i

如果您正在开发自己的应用程序，您可能希望基于结构呈现html，例如，与React一样。所以你有一个状态，你也可以表示你的过滤器。用另一种方法使用选择器既不方便也不容易让人混淆，你可能会在比赛中遇到同样的问题，这是不值得的

---

如果您在未开发的页面中作为外部脚本进行操作，比如油脂猴脚本，那么情况就不同了。但是，如果您可以控制页面的呈现方式，则可能需要更改方法。

如果您正在开发自己的应用程序，则可能需要基于结构呈现html，例如，与React一样。所以你有一个状态，你也可以表示你的过滤器。用另一种方法使用选择器既不方便也不容易让人混淆，你可能会在比赛中遇到同样的问题，这是不值得的

---

如果您在未开发的页面中作为外部脚本进行操作，比如油脂猴脚本，那么情况就不同了。但是，如果您可以控制页面的呈现方式，则可能需要更改方法。

要快速解决此问题，请执行以下命令：

                    if (filmClass.id === selectedFilm) {

需要：

                    if (filmClass[i].id === selectedFilm) {

---

要快速解决问题，请使用以下行：

                    if (filmClass.id === selectedFilm) {

需要：

                    if (filmClass[i].id === selectedFilm) {

通常使用内联事件处理程序

这里有一个使用和过滤元素的替代方法。删除按钮并应用

更改

处理程序和简化html

document.addEventListener（“更改”，showSelected）；
已选择功能显示（evt）{
if（/dropdown/i.test（evt.target.id））{
const selectValues={
电影：document.querySelector（#filmDropdown”）.value，
工作日：document.querySelector（“#dateDropdown”）.value
};
//（重新）最初显示所有
document.queryselectoral（“[数据胶片]，[数据工作日]”）
.forEach（elem=>elem.classList.remove（“hide”）；
//无需执行任何操作（选择全部/全部）
if（selectValues.films<1&&selectValues.weekday==“全部”）{
返回真值
}
//基于值的css查询选择器
//即当前选择中的所有元素*非*
const films=selectValues.films！=“0”？
`[data films]：不是（[data films='Film${selectValues.films}'）`:''；
const weekdays=selectValues.weekday！=“全部”？
`${films？`，`:''}[data weekday]：不是（[data weekday=）${
selectValues.weekday}']）`:''；
//隐藏所有未选定的图元
document.querySelectorAll（`${films}${weekdays}`）
.forEach（elem=>elem.classList.add（“hide”）；
}
}

正文{
字体：普通12px/15px verdana，arial；
保证金：2rem；
}
.隐藏{
显示：无；
}
ul[数据影片]{
左边距：-1em；
}
li[数据工作日]：之前{
内容：attr（数据工作日）'；
}
ul[数据胶片]：之前{
内容：attr（数据影片）；
位置：相对位置；
背景颜色：绿色；
颜色：白色；
填充物：1px 3px；
左边距：-1em；
边缘底部：1rem；
底部：4px；
字体大小：粗体；
}

所有电影
电影1
电影2
电影3
整天
星期一
星期二
星期三
星期四
星期五
星期六
星期日

14:00
16:00
20:00
16:00
12:00
16:00


12:00
16:00
12:00
16:00
18:00
20:00


10:00
14:00
12:00
16:00
12:00
16:00
10:00
16:00
17:00

通常使用内联事件处理程序

这里有一个