我在查找當前選定選項的值時遇到問題。
這是我到目前為止所嘗試的......
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 及其表單。不確定這是否會產生影響。
我已經嘗試了幾個小時尋找解決方案，所以如果有人能提供幫助，我將不勝感激。謝謝
uj5u.com熱心網友回復：
很簡單，請訪問https://www.w3schools.com/jsref/prop_select_value.aspvar x = document.getElementById("task-status").value;查看更多資訊
uj5u.com熱心網友回復：
每當檢測到下拉值發生更改時，您都可以創建并eventListener檢查該值。
https://jsfiddle.net/hxo8a5dt/
const status = document.getElementById("task-status");
status.addEventListener("change", function(event){console.log(event.target.value)});
對于所有事件偵聽器，事件會自動傳遞給您可以參考和檢查值的函式。
還要檢查console.log(event)并看看它擁有的所有其他好東西:)
uj5u.com熱心網友回復：
通常你只需要使用，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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/422388.html
標籤：
上一篇：影像內的文字不居中