单击下拉选项时触发事件答案

【问题标题】：Firing off event when clicking on a dropdown option单击下拉选项时触发事件
【发布时间】：2020-11-23 20:43:49
【问题描述】：

我正在创建一个带有下拉菜单的表单，并希望在单击时为该菜单中的每个行程显示其各自的关键字（最好在输入字段下方，如下面的代码所示）。

.show 设置为 display:none
关键字将在段落标签内

HTML

<label for="tour-select">Choose a tour
    <select name="tour" id="tour-select" required>
        <option value="landmarks"></option>
           <p class="landmarks show"></p>
        <option value="hidden-gems"></option>
           <p class="hidden-gems show"></p>
        <option value="diana">The Diana (5h)</option>
           <p class="diana show"></p>
    </select>
</label>

我在 JS 中尝试了以下方法，但到目前为止没有成功。我不完全确定我是否以错误的方式定位选项值，或者这是否是我如何构建代码的问题。

let tourInput = document.querySelector("select[name=tour]");
    tourInput.addEventListener("click", e => {
        if (e.target.value == "landmarks") {
            tourInput.querySelector(".landmarks").classList.remove("show");
        }
    })

【问题讨论】：

将<p> 元素放入<select> 是无效的。
您是否尝试在单击选项菜单时显示子菜单？如果是这样，您将希望使用其他 HTML，例如我们的无序列表。 select 标签实际上只用于表单。但是，如果您对不直接显示在其下方的关键字（可能它们呈现在页面上的其他位置）感到满意，您可以将关键字存储为数据属性。然后点击的时候，就可以引用event.target的数据集了。
@David 谢谢，我忘了
@rguttersohn 没关系，我找到了办法。我基本上只是将
标签移到了选择标签之外

标签： javascript forms input dropdown keyword

【解决方案1】：

看起来您在选择器名称周围缺少单引号。将"select[name=tour]" 更改为"select[name='tour']"。

【讨论】：