2 u013179958 u013179958 于 2016.02.24 22:45 提问

option标签可以设置事件吗?(附demo)
 <!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>

5个回答

qq_19891827
qq_19891827   2016.02.25 10:19
已采纳

可以考虑使用ul、li模拟select、option的效果。这样即达到了你想要的效果,兼容性又没有问题

qq_19891827
qq_19891827 回复据说名字太长不容易被发现: 那就是个我测试的点击事件,你可以换成其他的点击事件
接近 2 年之前 回复
u013179958
u013179958 回复qq_19891827: 你这个是select option,datalist是可以输入文字并且自动匹配的
接近 2 年之前 回复
qq_19891827
qq_19891827 回复据说名字太长不容易被发现: 我写了个简单的小demo,看下面代码
接近 2 年之前 回复
u013179958
u013179958 求demo...
接近 2 年之前 回复
devmiao
devmiao   Ds   Rxr 2016.02.24 23:08

可以哒,onclick onchange

u013179958
u013179958 瞄姐 你测试了吗
接近 2 年之前 回复
showbo
showbo   Ds   Rxr 2016.02.25 09:14

测试了下datalist 的option添加click不响应,input添加change事件也要blur才响应。

给select加change事件就好了,给select的option添加click有兼容性问题,firefox,ie9+支持,chrome不支持

showbo
showbo 回复据说名字太长不容易被发现: 你这种和自动完成差不多,只是一个是dom对象,一个是js来做。http://www.w3dev.cn/download/20100811/jquery-autoplete-download.aspx
接近 2 年之前 回复
u013179958
u013179958 SELECT OPTION 和我要的不是一个效果
接近 2 年之前 回复
hanfeizaopao
hanfeizaopao   2016.02.25 09:44

给他的父级元素加change事件就行了啊

u013179958
u013179958 加不了啊
接近 2 年之前 回复
qq_19891827
qq_19891827   2016.02.25 14:52
<!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>

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!