如何在点击数据列表选项列表时触发事件？

Question

我有一个看起来像的数据列表：

<datalist id="foodlist">
	
		<option value="one" ></option
		<option value="two" ></option>
		<option value="three" ></option>
	
</datalist>

<input type="text" list="foodlist" autocomplete=true id="inputItem"/>

当用户使用JavaScript在列表中选择选项时，我希望触发事件。

如何实现呢？

onClick，onChange似乎不起作用。

Answer 1

我知道这是一种旧的，但我想我应该的地方记录下来。如果您试图从下拉选择中检测输入，而不是单击本身，则可以使用“ input”事件并检查传递的事件对象的类型-剪切/粘贴/按键输入将传递“ InputEvent”对象，而数据列表选择将传递通用的“事件”对象。

var textbox = document.getElementById("inputItem");
textbox.addEventListener("input", function(e){
    
    var isInputEvent = (Object.prototype.toString.call(e).indexOf("InputEvent") > -1);
    
    if(!isInputEvent)
        alert("Selected: " + e.target.value);
    }, false);

<datalist id="foodlist">
	
		<option value="one" ></option>
		<option value="two" ></option>
		<option value="three" ></option>
	
</datalist>

<input type="text" list="foodlist" autocomplete=true id="inputItem"/>

Answer 2

<datalist id="foodlist">    
    <option value="one" ></option>
    <option value="two" ></option>
    <option value="three"></option> 
</datalist>

<input id="txt" type="text" list="foodlist" autocomplete=true id="inputItem"/>

document.getElementById('txt').addEventListener('input', function () {
    console.log('changed'); 
    var val = document.getElementById("txt").value;
    alert(val);
});

datalist 标签仅在某些浏览器中受支持。这是获取选定值的简单技巧。