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>