时间戳

首页 > 解决方案 > HTML5 数据列表 - 以编程方式显示选项列表

javascript - HTML5 数据列表 - 以编程方式显示选项列表

问题描述

我是 HTML5 数据列表的新手。我已经设置了一个<input type="text">绑定到<datalist>以下内容：

例如：

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

Chrome / Chromium 将输入显示为组合框，允许列出所有可能的值：

Chrome / Chromium 上的数据列表

Firefox 将输入显示为任何其他文本字段，但我意识到双击该字段或单击该字段并按下向下箭头键可以显示所有选项：

Firefox 上的数据列表

我需要实现一个与浏览器无关的按钮，该按钮在单击时显示该选项列表。喜欢：

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
<button type="button">Show options</button>

显示选项按钮

我怎样才能实现这样的按钮？

标签： javascripthtmldatalisthtml-datalist

解决方案

推荐阅读