スポンサーリンク

Web開発

Bootstrapのドロップダウンメニューをフォームで使う簡単な方法

Bootstrapのドロップダウンメニューをフォームで使う簡単な方法

Twitter Bootstrap のドロップダウンメニューには、選択された項目を表示したり、その値をフォームに送信する方法は用意されていません。
ですが、数行のJavaScriptを書くだけで、このドロップダウンメニューを<select>タグのように、フォームの中で使用することができます。

通常のBootstrapドロップダウンメニュー

Bootstrap – Dropdowns

メニュー項目を選択しても、ドロップダウンに変化はありません。
当然、このままでは選択された内容をフォーム値として送信することはできません。

JavaScriptを挿入

フォームで使用できるドロップダウンメニュー

通常の Bootstrapドロップダウンに追加した記述は下記の2点。

  • メニュー項目の<a>タグに、data-value属性を追加
  • name=”dropdown-value” を持つ <input>タグを追加

このドロップダウンメニューをフォーム内で使用すると、
選択された項目のdata-valueが、dropdown-valueの値としてフォーム送信されます。

【参考】

以下のサイトを参考にさせていただきました。ありがとうございます。
Bootstrap Dropdown Selected Value snippet – JHI6OtF0Yd

スポンサーリンク