172

Select-Option と Datalist-Option の違いは何かと思っていました。どちらか一方を使用する方が良い状況はありますか? それぞれの例は次のとおりです。

選択オプション

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Datalist オプション

<input type="text" list="browsers">
<datalist id="browsers">
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
4

8 に答える 8

229

要件と提案の違いと考えてください。要素の場合select、ユーザーは指定したオプションのいずれかを選択する必要があります。要素についてはdatalist、ユーザーが与えられたオプションの 1 つを選択することをお勧めしますが、ユーザーは実際には入力に必要なものを何でも入力できます。

編集1:どちらを使用するかは、要件によって異なります。ユーザーが選択肢の 1 つを入力する必要selectがある場合は、要素を使用します。用途が何でも入力できる場合は、そのdatalist要素を使用します。

編集 2: HTML Living Standardでこのヒントを見つけました:「datalist 要素の子孫である各オプション要素は...提案を表します。」

于 2011-08-09T19:54:14.190 に答える
79

技術的な観点から見ると、それらは完全に異なります。<datalist>他の要素のオプションの抽象コンテナです。あなたの場合はそれを使用しまし<input type="text"たが、範囲、色、日付などでも使用できます。http://demo.agektmr.com/datalist/

オートコンプリートの一種としてテキスト入力でそれを使用する場合、実際の問題は次のとおりです。その場合、答えはもう少し明白だと思います。

テキスト フィールドのオプションのリストとしてを使用することに焦点を当てる<datalist>と、それと選択ボックスの特定の違いがいくつかあります。

  1. <datalist>フィード テキスト ボックスには、表示ラベルと送信の両方に 1 つの文字列があります。選択ボックスには、送信値と表示ラベルが異なる場合があります<option value='ie'>Internet Explorer</option>。

  2. フィード テキスト ボックスは、表示を整理するためのタグをサポート<datalist>していません。<optgroup>

  3. <datalist>でできるように、ユーザーをオプションのリストに制限することはできません<select>。

  4. onchangeイベントの動作は異なります。要素では、<select>onchange イベントは変更直後に発生しますが <input type="text"、要素がフォーカスを失うか、ユーザーが Enter キーを押した後にイベントが発生します。

  5. <datalist>ブラウザ間でのサポートは本当にむらがあります。利用可能なすべてのオプションを表示する方法には一貫性がなく、事態は悪化するばかりです。

最後の点は、私の意見では本当に大きなものです。より普遍的なオートコンプリート フォールバックが必要になるため、<datalist>. さらに、まともなオートコンプリートプラグインを使用すると、オプションの表示をスタイルする方法が可能になりますが、そうではあり<datalist>ません. 好きなように操作できる要素が<datalist>受け入れられた場合、それは本当に素晴らしいことです! <li>しかし、いいえ。

また、私が知る限り、<datalist>検索は文字列の先頭から完全に一致します。その<option value="internet explorer">ため、「explorer」を検索した場合、結果は得られません。ほとんどのオートコンプリート プラグインは、テキスト内の任意の場所を検索します。

私は<datalist>、ユーザーが最新の Chrome または Firefox を使用しており、偽の値を送信しようとしないことが 100% 確実にわかっている内部ページの迅速で怠惰な便利なヘルパーとしてのみ使用しました。それ以外の場合は、<datalist>ブラウザのサポートが非常に貧弱であるため、 の使用を推奨するのは困難です。

于 2014-02-17T18:00:50.323 に答える
11

Datalist には、オートコンプリートと提案がネイティブに含まれており、提案で定義されていない値をユーザーが入力できるようにすることもできます。

Select は、ユーザーが選択する必要がある定義済みのオプションのみを提供します

于 2016-12-22T00:39:22.367 に答える
0

データリストに選択された機能がないことに気付きました。それはあなたに選択肢を与えるだけで、デフォルトのオプションを持つことはできません. 選択したオプションを次のページに表示することもできません。

于 2015-05-21T18:19:19.147 に答える