如何从下拉菜单中访问和存储选定的选项值

Question

我有很多麻烦。 我觉得我正在尝试做的事情应该非常简单，但我不知道该怎么做。

我要做的是获取在我的表单中选择和提交的任何值，并根据该值在当前 web 页面上显示/隐藏某些表。

  <form id="position" method="get">
    <p>Choose your position: </p>
    <select id="position-select" name="positions">
      <option value="utg">UTG</option>
      <option value="utg1">UTG +1</option>
      <option value="utg2">UTG +2</option>
      <option value="lojack">Lowjack</option>
      <option value="hijack">Hijack</option>
      <option value="cutoff">Cutoff</option>
      <option value="button">Button</option>
      <option value="sb">Small Blind</option>
    </select>
    <button type="submit">Submit</button>
  </form>

我试图了解如何在用户选择下拉值之一然后按“提交”时，我如何抓住他们选择的任何选择并将其保存到变量或其他东西，以便我可以显示/隐藏页面上的这些表格。

我一直在阅读有关帖子和获取方法的信息，并且喜欢与服务器通信，但我什至不想这样做。 我想根据 select 和提交的任何选择来更改当前 web 页面的 UI。

如果我可以将该值保存到一个变量中，那么我可以运行类似 if（他们选择的值 === xy 或 z）然后显示 xy 或 z 表并隐藏表的 rest 之类的东西。

这有意义吗？ 有人可以帮忙吗？

Answer 1

如果您尝试使用 JS 来触发更改，我认为已经回答了类似的问题：

如何获取选定选项的值并将其保存到变量中？ (Javascript)

基本上，我认为你需要为它触发一个 onChange 值。