2

にindex.htmlは、<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. -->

Javascript を使用してデータリストを動的に作成することなく、(多数の)option項目をメインの HTML ファイルから外部ファイルに取り出すことが望ましいです。

必要なものを示す疑似コード:

# 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 のインポートでしたが、それらは deprecatedであることが判明したため、あまり追求しませんでした。次に、 object tagを使用してこれを実行しようとすることに多くの時間を費やしましたが、値を取得するには Javascript が必要なようです。

HTMLでこれを行う方法はありますか？

4

1 に答える 1

0

いずれにせよ、HTML 部分をダウンロードしてメインの HTML ページに挿入するには、Javacscript コードが少し必要になります。

ただし、属性で定義されたファイル<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 に答える