2

在index.htmla 中有一个数据列表，<form>如下所示：

<input id="my_input" type="email" list="my_list" multiple>
<datalist id="my_list">
        <option value="Number 1">
        <option value="Number 2">
        <option value="Number ...">
        <option value="Number N-1">
        <option value="Number N">
</datalist>
<input type="submit"> <!-- Leaving out the form code for this MWE. -->

最好将（大量）option项目从主 HTML 文件中拉出并放入某个外部文件中，而不必使用 Javascript 来动态创建数据列表。

演示所需内容的伪代码：

# data.html
<datalist id="my_list">
        <option value="Number 1">
        <option value="Number 2">
        <option value="Number ...">
        <option value="Number N-1">
        <option value="Number N">
</datalist>

和

# index.html
<input id="my_input" type="email" source="data.html" list="my_list" multiple>
<input type="submit">

解决方案不必像上面那样完全分解，只要：

  1. （大量）option值位于单独的文件中。
  2. 中的表单index.html能够获取要提交的选定数据列表项。
  3. 无需 Javascript 即可在index.html.

我尝试的第一件事是 HTML 导入，但事实证明它们已被弃用，所以我没有深入研究它。然后我花了很多时间尝试使用object tag执行此操作，但似乎需要 Javascript 来获取这些值。

有没有办法在 HTML 中做到这一点？

4

1 回答 1

0

在任何情况下，您都需要一些 Javascript 代码来下载 HTML 部分并将其插入到主 HTML 页面中。

但是您可以通过使用属性中定义的文件<input>下载来定义一个扩展标准元素的自定义元素，并将其内容插入到正确的位置：fetch()sourceinsertAdjacentHTML( 'afterend', ... )

//data-list.js
customElements.define( 'data-list', class extends HTMLInputElement {
    static get observedAttributes() { return [ 'source' ] }
    async attributeChangedCallback( name, old, file ) {
        let fs = await fetch( file )
        this.insertAdjacentHTML( 'afterend', await fs.text() )
    }
}, { extends: 'input' } )

上面的 Javascript 可以内联定义或使用<script>标签加载。扩展<input>元素是使用is='data-list'属性定义的：

<script src='data-list.js'></script>
...
<input is="data-list" id="my_input" type="email" source="data.html" list="my_list" multiple>
<input type="submit">
于 2019-12-20T16:57:50.870 回答