ブートストラップを使用してリスト選択ボックス（ドロップダウン）をレンダリングするにはどうすればよいですか？

ブートストラップが「通常の」事実上のドロップダウンリストの選択ボックスをレンダリングするためにサポートしている、箱から出して何かありますか？つまり、ドロップダウンボックスは値のリストであり、選択された場合、リストボックスの内容を入力しますか？

この機能に似たものはありますか？

http://bootstrapformhelpers.com/select/

Bootstrap 3は、.form-controlクラスを使用してフォームコンポーネントのスタイルを設定します。

<select class="form-control">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
</select>

http://getbootstrap.com/css/#forms-controls

別のオプションは、BootstrapドロップダウンをjQueryを使用した選択のように動作させることです...

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});

http://www.bootply.com/b4NKREUPkN

Skellyの素晴らしくて簡単な答えは、Bootstapのドロップダウン構文の変更で古くなっています。代わりにこれを使用してください：

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.form-group').find('button[data-toggle="dropdown"]').html(selText+' <span class="caret"></span>');
});

テスト：http : //jsfiddle.net/brynner/hkwhaqsj/6/

HTML

<div class="input-group-btn select" id="select1">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="selected">One</span> <span class="caret"></span></button>
    <ul class="dropdown-menu option" role="menu">
        <li id="1"><a href="#">One</a></li>
        <li id="2"><a href="#">Two</a></li>
    </ul>
</div>

jQuery

$('body').on('click','.option li',function(){
    var i = $(this).parents('.select').attr('id');
    var v = $(this).children().text();
    var o = $(this).attr('id');
    $('#'+i+' .selected').attr('id',o);
    $('#'+i+' .selected').text(v);
});

CSS

.select button {width:100%; text-align:left;}
.select .caret {position:absolute; right:10px; margin-top:10px;}
.select:last-child>.btn {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.selected {padding-right:10px;}
.option {width:100%;}

別のオプションは、ブートストラップ選択を使用することです。彼ら自身の言葉で：

ボタンドロップダウンを使用したブートストラップのカスタム選択/複数選択。通常のブートストラップ選択のように動作するように設計されています。

.form-controlを使用しない別の方法は次のとおりです。

  $(".dropdown-menu li a").click(function(){
        $(this).parents(".btn-group").find('.btn').html($(this).text() + ' <span class="caret"></span>');
        $(this).parents(".btn-group").find('.btn').val($(this).data('value'));
      });

$(".dropdown-menu li a").click(function(){
  $(this).parents(".btn-group").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".btn-group").find('.btn').val($(this).data('value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="btn-group">
  <button  type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Test <span class="caret"> </span>
  </button>
  <ul class="dropdown-menu">
    <li><a href='#'>test 1</a></li>
    <li><a href='#'>test 2</a></li>
    <li><a href='#'>test 3</a></li>
  </ul>
</div>

ベンのコードでは、親divにフォームグループクラスが必要です（私はbtn-groupを使用していました）。これは、最も近いdivを検索するだけで少し高速なわずかに異なるバージョンです。

$(".dropdown-menu li a").click(function(){
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
});

Bootstrap3 .form-controlはクールですが、ボタンとulオプション付きのドロップダウンが好きな方、または必要な方のために、更新されたコードを以下に示します。スティーブがコードを編集して、ハッシュリンクにジャンプし、選択後にドロップダウンを閉じるように修正しました。

スティーブ、ベン、スケリーに感謝！

$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
    $(this).closest('.dropdown').removeClass("open");
    return false;
});

私は現在ドロップダウンと戦っていて、私の経験を共有したいと思います：

<select>使用できない特定の状況があり、ドロップダウンで「エミュレート」する必要があります。

たとえば、ドロップダウン付きのボタンなどのブートストラップ入力グループを作成する場合（http://getbootstrap.com/components/#input-groups-buttons-dropdownsを参照）。残念ながら<select>、入力グループではサポートされていません。正しくレンダリングされません。

それとも誰かがすでにこれを解決していますか？私は解決策に非常に興味があります。

さらに複雑にするために、$(this).text()グリピコンやフォントの素晴らしいアイコンをドロップダウンのコンテンツとして使用している場合は、ユーザーがドロップダウンで選択したものを簡単にキャッチすることはできません。例： <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> この場合はテキストがないため、テキストを追加すると、ドロップダウン要素にも表示され、これは不要です。

私は2つの可能な解決策を見つけました：

1）を使用$(this).html()して、選択した<li>要素のコンテンツを取得してから調べますが、次のような結果が得られる<a href="#0"><i class="fa fa-minus"></i></a>ので、必要なものを抽出するためにこれを試してみる必要があります。

2）$(this).text()非表示スパンの要素内のテキストを使用して非表示にします <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>。私にとってこれはシンプルでエレガントなソリューションです。必要なテキストを配置でき、テキストは非表示になり、必要$(this).html()なものを取得するためにオプション1）のような結果の変換を行う必要はありません 。

私はそれが明確で誰かを助けることができることを願っています:-)