jquery - Bootstrap ボタンのドロップダウン タイトルで選択したアイテムを表示する方法

Question

次のように、アプリケーションでブートストラップ ドロップダウン コンポーネントを使用しています。

<div class="btn-group">
    <button class="btn">Please Select From List</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
       <li><a tabindex="-1" href="#">Item I</a></li>
       <li><a tabindex="-1" href="#">Item II</a></li>
       <li><a tabindex="-1" href="#">Item III</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1" href="#">Other</a></li>
    </ul>
</div>

選択したアイテムを btn ラベルとして表示したいと思います。つまり、「リストから選択してください」を、選択されたリスト項目 (「項目 I」、「項目 II」、「項目 III」) に置き換えます。

Answer 1

私が理解している限り、あなたの問題は、リンクされたテキストをクリックしてボタンのテキストを変更したいということです。そうであれば、これを試すことができます：http: //jsbin.com/owuyix/4/edit

 $(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

---

あなたのコメントによると：

<li>これは、ajax呼び出しを介してリストアイテムが入力されている場合は機能しません。

.on()したがって、 jQueryメソッドを使用してイベントを最も近い静的な親に委任する必要があります。

 $(function(){

    $(".dropdown-menu").on('click', 'li a', function(){
      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
   });

});

ここで、イベントは静的な親に委任されますが、イベントは常に利用可能であるため$(".dropdown-menu")、イベントを委任することもできます。$(document)

Answer 2

Bootstrap 3.3.4 用に更新:

これにより、要素ごとに異なる表示テキストとデータ値を持つことができます。また、選択時にキャレットを保持します。

JS:

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

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="action">Action</a></li>
    <li><a href="#" data-value="another action">Another action</a></li>
    <li><a href="#" data-value="something else here">Something else here</a></li>
    <li><a href="#" data-value="separated link">Separated link</a></li>
  </ul>
</div>

JS フィドルの例

Answer 3

ブートストラップ 3 で動作する非常に優れたプレゼンテーションを備えた複数のボタン ドロップダウンがある場合、動作するように Jai の回答をわずかに改善することができました。

ボタンのコード

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Option: <span class="selection">Option 1</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>

JQuery スニペット

$(".dropdown-menu li a").click(function(){

  $(this).parents(".btn-group").find('.selection').text($(this).text());
  $(this).parents(".btn-group").find('.selection').val($(this).text());

});

また、「selection」クラスに 5px の margin-right を追加しました。

Answer 4

これが私のバージョンです。あなたの時間を節約できることを願っています:)

jQueryの一部:

$(".dropdown-menu").on('click', 'li a', function(){
  var selText = $(this).children("h4").html();


 $(this).parent('li').siblings().removeClass('active');
    $('#vl').val($(this).attr('data-value'));
  $(this).parents('.btn-group').find('.selection').html(selText);
  $(this).parents('li').addClass("active");
});

HTML 部分:

<div class="container">
  <div class="btn-group">
    <a class="btn btn-default dropdown-toggle btn-blog " data-toggle="dropdown" href="#" id="dropdownMenu1" style="width:200px;"><span class="selection pull-left">Select an option </span> 
      <span class="pull-right glyphiconglyphicon-chevron-down caret" style="float:right;margin-top:10px;"></span></a>

     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
       <li><a href="#" class="" data-value=1><p> HER Can you write extra text or <b>HTLM</b></p> <h4> <span class="glyphicon glyphicon-plane"></span>  <span> Your Option 1</span> </h4></a>  </li>
       <li><a href="#" class="" data-value=2><p> HER Can you write extra text or <i>HTLM</i> or some long long long long long long long long long long text </p><h4> <span class="glyphicon glyphicon-briefcase"></span> <span>Your Option 2</span>  </h4></a>
      </li>
      <li class="divider"></li>
   <li><a href="#" class="" data-value=3><p> HER Can you write extra text or <b>HTLM</b> or some </p><h4> <span class="glyphicon glyphicon-heart text-danger"></span> <span>Your Option 3</span>  </h4></a>
      </li>
    </ul>
  </div>
  <input type="text" id="vl" />
</div>  

Answer 5

これは、同じページの複数のドロップダウンで機能します。さらに、選択したアイテムにキャレットを追加しました:

    $(".dropdown-menu").on('click', 'li a', function(){
        $(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
        $(this).parent().parent().siblings(".btn:first-child").val($(this).text());
    });

Answer 6

openadd class in を使用する必要があります<div class="btn-group open">

li加えてclass="active"

Answer 7

ページ上の複数のドロップダウンのスクリプトを修正しました

$(function(){
    $(".dropdown-menu li a").click(function(){
        var item = $(this);
        var id = item.parent().parent().attr("aria-labelledby");

        $("#"+id+":first-child").text($(this).text());
        $("#"+id+":first-child").val($(this).text());
   });
});

Answer 8

$.text() が正確な文字列を返すため、@Kyle からの回答に基づいてさらに変更されるため、誰かがドロップダウンでキャレットをそのまま保持したい場合に備えて、キャレット タグはマークアップとしてではなく文字どおりに出力されます。

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

Answer 9

アイテムをクリックしたら、data-selected-item='true'などのデータ属性を追加して再度取得します。

クリックしたli要素にdata-selected-item='true'を追加してみてください。

   $('ul.dropdown-menu li[data-selected-item] a').text();

この属性を追加する前に、リスト内の既存のdata-selected-itemを削除するだけです。これがお役に立てば幸いです

jQueryでのデータ属性の使用については、jQueryデータを参照してください。

Answer 10

上記の表示されたJavaScriptを「document.ready」コード内に配置する必要がありました。そうでなければ、それらは機能しませんでした。おそらく多くの人にとっては明らかですが、私にとってはそうではありません。したがって、テストしている場合は、そのオプションを見てください。

<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>

Answer 11

例えば：

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
     <BtnCaption>Select item</BtnCaption>
     <span class="caret"></span>   
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Option 1</a></li>
     <li><a href="#">Option 2</a></li>
     <li class="disabled"><a href="#">Option 3</a></li>   
  </ul> 
</div>

ボタンのテキストのみを変更するために、新しい要素 BtnCaption を使用します。

$(document).ready(function () {}次のテキストに貼り付けます

JavaScript:

    $(".dropdown-menu li:not(.disabled) a").click(function () {
        $(this).closest(".dropdown").find(".btn BtnCaption").text($(this).text()));
    });

:not(.disabled)無効なメニュー項目の使用を許可しない

Answer 12

そのために選択的なフローティングラベルを使用することを好みます

<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>