如何在没有jquery的情况下检查下拉列表的值?

问题描述 投票:-1回答:2

我想创建一个函数,当按下按钮时,检查从每个下拉列表中选择的选项。不知道我会怎么做,我在网上找到的一切都是jquery,我不想用。这可能是不可能的,这可能是好的,因为我可以只使用插入的输入值,但想到我可能也会问这里fisrt。

<body>
    <select class="Alder" name="Alder">
      <option id="B">0-12år</option>
      <option id="V">Eldre en 12år</option>
    </select>
    <select class="Dager" name="Dager">
      <option id="1">1 Dag</option>
      <option id="2">2 Dager</option>
      <option id="3">3 Dager</option>
      <option id="4">4 Dager</option>
      <option id="5">5 Dager</option>
      <option id="6">6 Dager</option>
      <option id="7">7 Dager</option>
    </select>
    <button id="prisKnapp" type="button" name="button">Regn ut pris</button>
  </body>
javascript html button dropdown
2个回答
0
投票

您可以通过在每个选择输入上分配类来获取所有下拉输入的值,假设您使用的是select类名。

HTML:

<body>
    <select class="Alder select" name="Alder">
    <option id="B">0-12�r</option>
    <option id="V">Eldre en 12�r</option>
    </select>
    <select class="Dager select" name="Dager">
    <option id="1">1 Dag</option>
    <option id="2">2 Dager</option>
    <option id="3">3 Dager</option>
    <option id="4">4 Dager</option>
    <option id="5">5 Dager</option>
    <option id="6">6 Dager</option>
    <option id="7">7 Dager</option>
    </select>
    <button id="prisKnapp" type="button" onclick='getVal()' name="button">Regn ut pris</button>
</body>

javascript:

var sel = document.getElementsByClassName("select");

function getVal(){
    for (const key in sel) {
        if (sel.hasOwnProperty(key)) {
            console.log(sel[key].value);
        }
    }
}

0
投票

给你的options values而不是ids,然后你可以使用FormData API来序列化表单,好像它是“传统”提交并访问将要发送的值:

document.getElementById("f").addEventListener("submit", (event) => {
  event.preventDefault();
  const fd = new FormData(event.target);
  alert(
    'Dager: ' + fd.get('Dager') + '\n' + 
    'Alder: ' + fd.get('Alder')
  );
});
<body>
  <form id="f">
    <select class="Alder" name="Alder">
      <option value="B">0-12år</option>
      <option value="V">Eldre en 12år</option>
    </select>
    <select class="Dager" name="Dager">
      <option value="1">1 Dag</option>
      <option value="2">2 Dager</option>
      <option value="3">3 Dager</option>
      <option value="4">4 Dager</option>
      <option value="5">5 Dager</option>
      <option value="6">6 Dager</option>
      <option value="7">7 Dager</option>
    </select>
    <button type="submit" name="button">Regn ut pris</button>
  </form>
</body>
© www.soinside.com 2019 - 2024. All rights reserved.