1. ホーム
  2. html

[解決済み] HTMLコンボボックス、入力オプション付き

2022-03-08 03:17:44

質問

コンボボックスは、リストにある値を選択するだけでなく、入力することもできると思っていました。しかし、この方法についての情報が見つかりません。テキストを入力できるようにするために追加しなければならないプロパティがあるのでしょうか?

どのように解決するのですか?

datalist (以下の注を参照)、追加で input 要素で、ユーザーが自分の好きなオプションを入力できるようにします。

<select name="example">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="-">Other</option>
</select>

<input type="text" name="other">

この仕組み すべてのブラウザで動作し、JavaScriptを必要としない .

ちょっとしたJavaScriptを使って、巧妙に input が選択されている場合、quot;Other" のオプションが表示されます。

datalist 要素

datalist 要素は、このコンセプトのためのより良いメカニズムを提供することを意図しています。iOS Safari < 12.2など一部のブラウザでは、これがサポートされていないか、実装に問題がありました。 現在のdatalistのサポート状況は、Can I Useのページでご確認ください。 .

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>