How to check the value of the currently selected option (using Javascript)

0
votes

I'm having an issue finding the value of the currently selected option.

Heres what I have tried so far...

HTML

<label for="task-status">Status</label>
  <select class="form-control" id="task-status" required>
    <option selected disabled value="">Select status</option>
    <option value="to do">To Do</option>
    <option value="review">Review</option>
    <option value="in progress">In Progress</option>
    <option value="done">Done</option>
  </select>

JS

const status = document.getElementById("task-status");
let value = status.options[status.selectedIndex].value;
console.log(value);

This prints nothing to the console and have no idea why.

What I want to do ultimately is check if the user selected option has a value of "" (empty) if so, display error (selection invalid). Otherwise if the user selected option is !"" (not empty) the selection is valid

It might be worth noting that I'm using Bootstrap and its forms. Not sure if that could have an effect.

I have tried searching for solutions for hours so I'd really appreciate if anyone can help. Thank you

1
javascripthtmlformstwitter-bootstrapdom
Your code works as it is, but the selected option has an empty string as its value. – Teemu

1 Answers

1
votes

It just simple var x = document.getElementById("task-status").value; , check more at https://www.w3schools.com/jsref/prop_select_value.asp