<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<button id="thisBtn">thisBtn</button>
<input id="thisInput" list="thisList">
<datalist id="thisList">
<option id="opt1">opt1</option>
<option>opt2</option>
<option>opt3</option>
<option>opt4</option>
</datalist>
<script type="text/javascript">
$().ready(function(){
console.log("文档读取完毕");
$("#opt1").click(function(){
alert(1);
});
});
</script>
</body>
</html>
可以考虑使用ul、li模拟select、option的效果。这样即达到了你想要的效果，兼容性又没有问题
可以哒，onclick onchange
测试了下datalist 的option添加click不响应，input添加change事件也要blur才响应。
给select加change事件就好了，给select的option添加click有兼容性问题，firefox，ie9+支持，chrome不支持
给他的父级元素加change事件就行了啊
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#ul{
margin-left:100px;
list-style:none;
width:150px;
border:1px solid #000;
display:none;
}
#ipt{
margin:10px 0 0 100px;
}
li a{
display:inline-block;
width:100%;
height:100%;
text-decoration:none;
color:#000;
}
li a:hover{
background-color:blue;
}
</style>
</head>
<body>
<input id="ipt" type="text" placeholder="点击测试"/>
<ul id="ul">
<li><a href="javascript:;">测试1</a></li>
<li><a href="javascript:;">测试2</a></li>
<li><a href="javascript:;">测试3</a></li>
<li><a href="javascript:;">测试4</a></li>
<li><a href="javascript:;">测试5</a></li>
<li><a href="javascript:;">测试6</a></li>
</ul>
<script type="text/javascript">
var ipt=document.getElementById('ipt');
var ul=document.getElementById('ul');
var lis=ul.children;
ipt.onfocus=function(){
ul.style.display='block';
}
ipt.onblur=function(){
setTimeout(function(){
ul.style.display='none';
},200)
}
//模拟option点击事件
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
ipt.value=this.innerText;
}
}
</script>
</body>
</html>