カスタム値を入力するオプションを備えた HTML 選択フォーム 質問する

カスタム値を入力するオプションを備えた HTML 選択フォーム 質問する

ユーザーがカスタム テキスト値を入力したり、ドロップダウンから選択したりできる入力フィールドが必要です。通常は<select>ドロップダウン オプションのみが提供されます。

カスタム値を受け入れるにはどうすればよいですか<select>?たとえば、フォードですか?

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

ベストアンサー1

HTML5にはコンボボックスが組み込まれています。テキストinputdatalist. 次に、list属性を に追加し、のinputの値を に設定します。iddatalist

アップデート:2019年3月現在、すべての主要ブラウザ(Safari 12.1およびiOS Safari 12.3を含む)がdatalistこの機能に必要なレベルでサポートされています。使ってもいいですか詳細なブラウザサポートについてはこちらをご覧ください。

次のようになります:

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>

おすすめ記事