Javascript 单击下拉选项时触发事件

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

.show设置为显示：无

关键词将在段落标记中

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>

---

看起来选择器名称缺少单引号。将

“选择[name=tour]”更改为
“选择[name='tour']”
将
元素放入
中无效。单击选项菜单时是否尝试显示子菜单？如果是这样的话，您将需要使用其他HTML，比如我们的无序列表。select标记实际上只用于表单。但是，如果您对关键字不直接显示在其下方（可能它们呈现在页面的其他位置）没有意见，则可以将关键字存储为数据属性。然后单击，就可以引用event.target的数据集了。@David谢谢，我忘了that@rguttersohn没关系，我找到了办法。我基本上只是将标记移到select标记之外
let tourInput = document.querySelector("select[name=tour]");
    tourInput.addEventListener("click", e => {
        if (e.target.value == "landmarks") {
            tourInput.querySelector(".landmarks").classList.remove("show");
        }
    })