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

时间:2019-08-28 16:22:03

标签: javascript html datalist html-datalist

我是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将输入显示为组合框,允许其列出所有可能的值:

Datalist on Chrome / Chromium

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

Datalist on 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>

Show options button

如何实现这样的按钮?

0 个答案:

没有答案