2013-04-13 14 views
24

テキスト入力のオプションを使用してHTMLで選択スタイルのドロップダウンメニューを実装するにはどうすればよいですか?入力フィールドでHTMLを選択するドロップダウン

誰かが事前定義されたオプションのリストから選択することも、独自のオプションを入力することもできます。

+0

'検索フィールド==入力テキストfield' –

+0

@MohammadAdilうんていますが、私は:) – jesal

答えて

54

"list"属性を持つ入力テキストを使用できます。これは、値のデータリストを参照します。

<input type="text" name="city" list="cityname"> 
<datalist id="cityname"> 
    <option value="Boston"> 
    <option value="Cambridge"> 
</datalist> 

これにより、事前定義された選択肢を選択するためのドロップダウンがあるフリーテキスト入力フィールドが作成されます。例および詳細については、帰属:https://www.w3.org/wiki/HTML/Elements/datalist

+4

こんにちはオレグ、プラグインやいくつかのサンプルコードのいずれかを求めたオリジナルポスター何を意味するか知っている - ことができ彼らはあなたが望むことをするために "リスト"属性を適用する方法を示すためにあなたの答えを洗い出しますか?ありがとうございました。 –

+4

woah。今私はちょうど新しいことを学んだ。私は、多くのプログラマーがこの問題を解決するためのこの簡単なトリックを知らないと思います。ありがとうございました。 – Dummy

+2

データリストはトリックですが、一部のブラウザ(ex。chrome)の表示が問題になることがあります。要素を選択するのとは逆に、長いリストの大きな問題であるスクロールバーをスタイルすることはできません。 –

関連する問題