Bootstrapのドロップダウンリストをセレクトボックスの代わりにフォームに利用する

Bootstrapのドロップダウンリストをセレクトボックスの代わりにフォームで利用する方法です。

HTMLを記述

<div class="inputBlock">
      <div class="input-group input-group-lg">
        <div class="input-group-btn">
          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            結果を選択
            <span class="fa fa-caret-down"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" data-value="会えた">会えた</a></li>
            <li><a href="javascript:void(0)" data-value="会えなかった">会えなかった</a></li>
          </ul>
          <input type="hidden" name="dropdown-value" value="">
        </div>
        <!-- /btn-group -->
      </div>
</div>

ＪａｖａＳｃｒｉｐｔを記述

こちらはWordPressの管理画面用の記述になっていますので適宜修正して下さい。

  <script type="text/javascript">
    jQuery(function ($) {
      $(".dropdown-menu li a").click(function () {
        $(this).parents('.input-group-btn').find('.dropdown-toggle').html($(this).text() + ' <span class="caret"></span>');
        $(this).parents('.input-group-btn').find('input[name="dropdown-value"]').val($(this).attr("data-value"));
      });
    });
  </script>

こちらを参考にさせていただきました。
ありがとうございました：Bootstrapのドロップダウンメニューをフォームで使う簡単な方法