I'm currently working on a form that includes a dropdown menu. My goal is to display specific keywords for each trip when selected from the menu (preferably below the input field, as shown in the code snippet below).
- .show has been set to display:none
- The keywords will be wrapped within paragraph tags
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>
I've attempted some JavaScript code but haven't had any success yet. I'm unsure if I'm targeting the option value incorrectly or if there's a problem with my code structure.
let tourInput = document.querySelector("select[name=tour]");
tourInput.addEventListener("click", e => {
if (e.target.value == "landmarks") {
tourInput.querySelector(".landmarks").classList.remove("show");
}
})