205

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

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

http://bootstrapformhelpers.com/select/

ここに画像の説明を入力

4

9 に答える 9

424

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

于 2013-08-09T16:20:41.143 に答える
39

Dropdownコンポーネントを使用してブートストラップを選択できます...

ブートストラップ 5 (2021 年更新)

<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#" id="selectA">Select<span class="caret"></span></a>
<ul class="dropdown-menu">
     <li class="dropdown-item"><a href="#">Item I</a></li>
     <li class="dropdown-item"><a href="#">Item II</a></li>
     <li class="dropdown-item"><a href="#">Item III</a></li>
     <li class="dropdown-item"><a href="#">Item IV</a></li>
</ul>


let links = document.querySelectorAll('.dropdown-item')
links.forEach(element => element.addEventListener("click", function () {
    let text = element.innerText
    document.getElementById('selectA').innerText = text
}))

ブートストラップ 5

元の回答 (Bootstrap 3)

別のオプションは、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>');
});

ブートストラップ 3

于 2014-05-01T17:30:32.870 に答える
12

別のオプションとして、bootstrap selectを使用することもできます。彼ら自身の言葉で：

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

于 2015-09-20T16:15:31.667 に答える
11

Bootstapのドロップダウン構文の変更により、Skellyの素晴らしく簡単な答えは時代遅れになりました。代わりにこれを使用します。

$(".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>');
});
于 2014-08-25T21:22:34.547 に答える
5

.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>

于 2016-07-04T16:13:59.477 に答える
1

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

<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) のような結果の変換を行う必要はありません。

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

于 2016-02-29T15:59:22.577 に答える
1

Bootstrap3.form-controlはクールですが、ボタンと ul オプション付きのドロップダウンが好きな人や必要な人のために、更新されたコードを次に示します。ハッシュ リンクへのジャンプと選択後のドロップダウンのクローズを修正するために、Steve によるコードを編集しました。

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

$(".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;
});
于 2016-01-09T12:47:45.163 に答える