[解決済み] Bootstrapのボタンドロップダウンのタイトルで選択された項目を表示する方法

質問

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

<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のラベルとして表示したいのですが。つまり、"Please Select From List"を、選択されているリスト項目("Item I", "Item II", "Item III") に置き換えるのです。

解決方法は？

あなたの問題は、クリックしたリンクテキストでボタンのテキストを変更したいということだと思いますので、もしそうなら、次のものを試してみてください。 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) も常に利用可能だからです。