Question

我想在选择以下某个选项时添加命令。我不确定用于调用输入值的ID。

{{1}}

Answer 1

我已经更新了您的示例，因为您无法直接访问datalist元素上的事件，因此最好使用相关的input元素。我还在输入元素上添加了oninput事件的监听，它覆盖了更多数据的变化情况，而不仅仅是输入元素的onchange。

这是工作示例。

<input list="browsers" name="browser" id="inputBrowsers" onchange="decider()" oninput="decider()">
<datalist id="browsers">
  <option value="Internet Explorer">
    <option value="Firefox">
</datalist>
<input type="submit">

<script>
  function decider() {
    if (document.getElementById("inputBrowsers").value == "Internet Explorer") {
      alert("Incorrect");
    }
  }
</script>

但是，这是一个更高级的选项。这个更高级的选项被认为是更好的做法，因为它避免了在HTML中内嵌事件处理程序所带来的许多陷阱。 Scott Marcus在下面的评论中概述了应该避免这些原因的原因。

<input list="browsers" name="browser" id="inputBrowsers">
<datalist id="browsers">
  <option value="Internet Explorer">
    <option value="Firefox">
</datalist>
<input type="submit">

<script>
  var checkInput = function(event) {
    var inputElement = event.target;
    if (inputElement.value == "Internet Explorer") {
      alert("Incorrect");
    }
  };
  var element = document.getElementById("inputBrowsers");
  element.addEventListener("change", checkInput);
  element.addEventListener("input", checkInput);
</script>

Answer 2

您没有正确获取元素引用。 getElementById（）用于具有ID的元素。名称与ID不同。您应该将HTML修改为：

 <input type=text id=txtBrowserList name=txtBrowserList>

然后访问它并编写如下代码：

 var theListControl = document.getElementById("txtBrowserList");

 theListControl.addEventListener("change", function(){
     console.log("You chose: " + theListControl.value);
     if(theListControl.value === "Internet Explorer"){
         alert("Incorrect!");
     }
 });

在Javascript中定位datalist值

2 个答案: