datalist 如何判斷下拉菜單中是否選擇了輸入

Question

 <label>Choose a browser from this list:
    <input id = "a" list="browsers" name="myBrowser" 
      style="width: 400px;" onchange="castvote()"  /></label>
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Internet Explorer">
    <option value="Opera">
    <option value="Safari">
    <option value="Microsoft Edge">
  </datalist>

function castvote() {
    var datalist = document.getElementById('a');
   // var datalist = document.getElementById("a").children; // this did not work as well
    console.log("Chrome" in datalist);
    }

當我 select Chrome 或任何其他選項並檢查它是否是我想要的選項之一（下拉選項之一）時，控制台返回 false。 如何讓它返回 true（檢測我選擇的選項之一確實是下拉選項）？ 如果可能，請不要 Jquery

Answer 1

 function castvote() { var datalist = document.getElementById('a'); // var datalist = document.getElementById("a").children; // this did not work as well // console.log("Chrome" in datalist); var browserChildren = document.getElementById('browsers').children var flag = false for(let i = 0; i < browserChildren.length; i++){ flag = browserChildren[i].value === datalist.value || flag } console.log(flag) }

 <label>Choose a browser from this list: <input id = "a" list="browsers" name="myBrowser" style="width: 400px;" onchange="castvote()" /></label> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist>

Answer 2

由於您在 中提供了選項，因此您無法獲得與選項不同的東西，並且考慮到這一點，在您一直描述的邏輯中，結果將是真實的，如果您想獲得您可以使用的選定值來自事件偵聽器的事件 object。 這是一個例子。

作為額外說明，如果您使用“addEventListener”添加偵聽器會更好，因為您將獲得對事件的更多控制，並為每個元素添加多個事件。

 const browsersDataList = document.getElementById("browser-choice"); browsersDataList.addEventListener("change", castvote); function castvote(event) { console.log(event.target.value) }

 #browser-choice { width: 400px; }

 <label for="browser-choice">Choose a browser from this list:</label> <input list="browsers" id="browser-choice" name="browser-choice" /> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist>