如何检查当前选定选项的值（使用 Javascript）

Question

我在查找当前选定选项的值时遇到问题。

这是我迄今为止尝试过的......

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

<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>

这不会在控制台上打印任何内容，也不知道为什么。

我最终要做的是检查用户选择的选项的值是否为“”（空） 如果是，则显示错误（选择无效）。 否则，如果用户选择的选项是 !"" （非空） 选择有效

值得注意的是，我正在使用 Bootstrap 及其表单。不确定这是否会产生影响。

我已经尝试了几个小时寻找解决方案，如果有人能提供帮助，我将不胜感激。谢谢

Answer 1

很简单var x = document.getElementById("task-status").value;，更多信息请访问https://www.w3schools.com/jsref/prop_select_value.asp

Answer 2

您可以创建和eventListener，以便在检测到下拉值更改时检查该值。

https://jsfiddle.net/hxo8a5dt/

const status = document.getElementById("task-status");
status.addEventListener("change", function(event){console.log(event.target.value)});

对于所有事件侦听器，事件会自动传递给您可以引用和检查值的函数。

还可以查看console.log(event) 并查看它拥有的所有其他好东西:)

Answer 3

通常您只需要使用value，但有时您想查找文本和值，因此.options.selectedIndex 提供了如下可能性。

const oSel=document.getElementById("task-status")

oSel.addEventListener('change',function(e){
  let value=this.value;
  let optval=oSel.options[oSel.options.selectedIndex].value;
  let opttext=oSel.options[oSel.options.selectedIndex].text;
  
  console.info('%s - %s - %s', value,optval,opttext);
});

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