时间戳

首页 > 解决方案 > 在 Javascript 中，如何从 HTML 中的“select”元素中选择“option”属性？

javascript - 在 Javascript 中，如何从 HTML 中的“select”元素中选择“option”属性？

问题描述

在 JavaScript 中，我如何获得用户从菜单列表中选择的任何选项？我正在尝试这样做，以便在选择第一个选项“默认”时，它会显示一条错误消息。

如何在不更改 HTML 的情况下在 Javascript 中执行此操作？提前致谢！

<div class="error"></div>
<form class="form">
  <div class="form-control">
    <label for="menu">Menu List</label>
    <select name="menu" id="menu">
      <option value="default">Choose an image...</option>
      <option value="fries">Fries</option>
      <option value="ice-cream">Ice cream</option>
      <option value="cake">Cheesecake</option>
    </select>
  </div>
</form>

标签： javascripthtml

解决方案

获取元素的value属性。<select>

document.querySelector("#submit").addEventListener("click", function() {
  let choice = document.getElementById("menu").value;
  if (choice == "default") {
    alert("Please select an image");
  } else {
    console.log("Thank you for purchasing " + choice);
  }
});
<div class="error"></div>
<form class="form">
  <div class="form-control">
    <label for="menu">Menu List</label>
    <select name="menu" id="menu">
      <option value="default">Choose an image...</option>
      <option value="fries">Fries</option>
      <option value="ice-cream">Ice cream</option>
      <option value="cake">Cheesecake</option>
    </select>
  </div>
  <br>
  <button type="button" id="submit">Submit</button>
</form>

推荐阅读