ブートストラップドロップダウン選択項目

Question

最近ブートストラップ（https://getbootstrap.com）を使い始めました。ドロップダウンメニューの機能を調べています。

何か不足しているかどうかわかりませんが、ドロップダウンメニューボタンで選択されたものが表示されるはずです。私は、次のドロップダウン

Select Item <---This is the button 
-Item 1 <---This is the item 
-Item 2 <---This is the item 
-Item 3 <---This is the item 

を持っている場合、ユーザーは「アイテム1」を選択すると、ユーザーが自分のドロップダウン上のに対し、選択されているものを知っているので、例えば、私は、ボタンのテキストを「項目1」に変更することが期待されますユーザーがアイテムをクリックすると、ドロップダウンメニューが閉じ、テキストは変更されません。これは基本的なものなので、私は何かが欠けていると思ったので、getbootstrapウェブサイトの例は同じことを示しているようですが、これを行うという事実、私はドロップダウンのポイントを見落とします。

これを周りにグーグルでは、唯一の実装は、私が起こると期待していることを行うために長い複雑なjavascriptのようだ、これは正しいですか、私はどこかで紛失しているものがありますか？

ありがとうございました

Answer 1

あなたの説明に基づいて、必要な機能は選択ボックスです。ブートストラップのドロップダウンはリストを折りたたむ（ナビゲーションバーを考える）ためのものです。

bootstrap-selectのようなプラグインを使うこともできますし、独自の機能を書くこともできます（私はあなたの機能を書くことをお勧めします）。ここで

は、あなたが選択ボックスをシミュレートするために何ができるかの小さなモックアップです： https://jsfiddle.net/eanzfcu1/

基本的にはあなただけのものは何でもulテキストを変更し、その後、リストのliの項目についてonclickのために聞いていますliのものです。

Answer 2

のように聞こえるかもしれませんが、プラグインを探しています。 私は本当にブートストラップマルチセレクションが好きです。

ここへのリンクです。

http://davidstutz.github.io/bootstrap-multiselect/

私は、ブートストラップのドロップダウンがスタイル一貫しているNAV /メニューのためにそこにあるだけのコードスニペットを実行

$(document).ready(function() { 
 
     $('#example-getting-started').multiselect(); 
 
    });

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

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> 
 

 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<select id="example-getting-started" > 
 
    <option value="cheese">Cheese</option> 
 
    <option value="tomatoes">Tomatoes</option> 
 
    <option value="mozarella">Mozzarella</option> 
 
    <option value="mushrooms">Mushrooms</option> 
 
    <option value="pepperoni">Pepperoni</option> 
 
    <option value="onions">Onions</option> 
 
</select>

Answer 3

以下の簡単な例の1を貼り付けコピー他のボタンと一緒に。

「選択」動作をしたい場合は、実際には「長い複雑なjavascript」ではありません。 ::

$(".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.codeply.com/go/Msi58Gy11u

OFCをそれをフックする のjQueryの数行、選択入力があまりにも行動を「選択」のためにそこに常にあります。