How to check value of drop down list without jquery?

Question

I want to make a function that, when the button is pressed, checks what option is selected from each drop down list. Don't know how i would do this and everything i find online is jquery, something i don't want to use. It might not be possible, which would be fine cause i could just use imput values insted but figured i might aswell ask here 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>

Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — sertsedat, Mar 22 '19 at 08:23

Hasta Dhana · Answer 1 · 2019-03-22T08:15:26.973

You could get value form all dropdown input by assigning class on each select input, let say you are using select class name.

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);
        }
    }
}

score 0 · Answer 2 · answered Mar 22 '19 at 08:25

Give your options values instead of ids, and you can then use the FormData API to serialize the form as if it were submitted "traditionally" and access the values that would be sent:

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>

How to check value of drop down list without jquery?

2 Answers2