Select 特定选项事件处理程序 [javascript]

Question

我是 javascript 的超级新手。

我正在尝试制作一段代码，当用户单击下拉菜单中的特定项目并单击提交按钮时显示成功警报（以及其他项目的警告警报+提交）

这是 html 部分：

        <select>
            <option id="realism">Realism</option>
            <option id="impressionism">Impressionism</option>
            <option id="post">Post-Impressionism</option>
            <option id="default"selected>Choose your answer</option>
        </select>

        <button class="btn btn-primary" type="submit">Submit</button>

        <br>

        <div id="right"class="alert alert-success" role="alert" display="none">
          Well done!
        </div>

        <div id="wrong"class="alert alert-warning" role="alert">
          Try again!
        </div>

这是我尝试的 JS：

<script>
    //defining variables
    let right = document.querySelector('#right');
    let wrong = document.querySelector('#wrong');

    //setting them to display none
    right.style.display = 'none';
    wrong.style.display = 'none';

    if (document.querySelector('#impressionism').onclick && document.querySelector('button').onclick)
    {
        document.querySelector('#right').style.display = 'block';
    }
</script>

最后两行不起作用，我不明白为什么。我已经尝试了 onclick、onchange 和其他选项。

谢谢！

Answer 1

提供选项值并为 <select> 分配一个 ID，然后您可以在提交按钮的事件侦听器中检查下拉列表的值。

另外，display不是属性，应该是style="display: none"

document.querySelector("#submitBtn").addEventListener("click", function() {
  if (document.querySelector("#genre").value == "impressionism") {
    document.querySelector("#right").style.display = "block";
    document.querySelector("#wrong").style.display = "none";
    } else {
    document.querySelector("#wrong").style.display = "block";
    document.querySelector("#right").style.display = "none";
    }
});

<select id="genre">
  <option value="realism">Realism</option>
  <option value="impressionism">Impressionism</option>
  <option value="post">Post-Impressionism</option>
  <option value="default" selected>Choose your answer</option>
</select>

<button id="submitBtn" class="btn btn-primary" type="submit">Submit</button>

<br>

<div id="right" class="alert alert-success" role="alert" style="display: none">
  Well done!
</div>

<div id="wrong" class="alert alert-warning" role="alert" style="display: none">
  Try again!
</div>

Answer 2

Barmar 的回答完成了工作，但那里有很多无关和不必要的代码。

您不需要将 option 元素的 value 属性设置为能够访问 option.value 因为 .value option 将是其默认文本。
您不应该 re-query 一遍又一遍地查看同一个文件元素 - 那只是浪费时间和资源。获取参考你只需要一次就需要很多次。
避免使用内联样式，因为它们会让您不得不编写冗余代码（不能很好地扩展）和内联样式如果需要，以后最难覆盖。相反，总是尝试使用 CSS 类，然后可以使用 .classList API.
你实际上并没有在任何地方提交数据，所以你应该使用常规 button，而不是 submit 按钮。
您无需为结果设置两个单独的区域出现。您可以只拥有一个区域并动态设置文本在其中及其样式。
您询问了设置 onclick 和使用 addEventListener... 你应该使用现代 .addEventListener.

let lstGenre = document.querySelector("#genre");
let result = document.querySelector("#result");

document.querySelector("button[type='button']").addEventListener("click", function() {
  result.classList.remove("hidden");
  if (lstGenre.value == "Impressionism") {
    result.textContent = "Correct!";
    result.classList.remove("alert-warning");
    result.classList.add("alert-success");
  } else {
    result.textContent = "Try again!";
    result.classList.remove("alert-success");
    result.classList.add("alert-warning");
  }
});

.hidden { display:none; }
.alert { border:1px solid black; }
.alert-success { background-color:green;}
.alert-warning { background-color:yellow;}

<select id="genre">
  <option value="" selected>Choose your answer</option>
  <option>Realism</option>
  <option>Impressionism</option>
  <option>Post-Impressionism</option>
</select>

<button class="btn btn-primary" type="button">Submit</button>
<br>
<div id="result" class="alert hidden" role="alert"></div>

Select 特定选项事件处理程序 [javascript]

Select specific option event handler [javascript]

html

javascript

event-handling