datalist不能添加点击事件onclick, select可以添加onclick

本文链接：https://blog.csdn.net/u014182411/article/details/72843230

在HTML中，datalist元素不支持直接添加onclick点击事件，而select元素则可以。示例代码展示了如何为select添加onclick事件，并定义了一个名为'he'的JavaScript函数来响应点击事件，弹出选中项的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在datalist和select中不能直接添加button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
   <!-- <link href="http://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/4.2.0/normalize.min.css"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
</head>
<body>
<input type="text" id="RX2DateRate" name="RX2DateRate" placeholder="第二接收窗口速率" list="RX2DateRateSelect"/>
<datalist id="RX2DateRateSelect" οnclick="he(this.value)">
    <option value="DR0"></option>
    <option value="DR1"></option>
    <option value="DR2"></option>
    <option value="DR3"></option>
    <option value="DR4"></option>
    <option value="DR5"></option>
</datalist>


<form>
    <select name="cars"  οnclick="he(this.value)" >
        <option value="volvo" >Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
</form>


</body>
<script>
    function he(bu) {
        alert(bu)
    }
</script>
</html>