ブートストラップドロップダウンタイトルを選択タイトルに変更するには

Question

私は、ドロップダウンメニューのタイトルを選択したアイテムに変更しようとしています。それはjsfiddleで動作しますが、私のプロジェクトでは動作しません。 は、ここに私のコードです：

<script type="text/javascript"> 
$(".dropdown-menu li a").click(function() { 
    $('#countries').html($(this).text() + ' <span class="caret"></span>'); 
    $('#countries').val($(this).data('value')); 
}); 

<div class="dropdown" style="text-align:center"> 
         <button id="countries" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" href="#" style="width:50%"> 
          Country 
          <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu" style="width:50%; text-align:center"> 
          <li><a href="#" data-value="Afghanistan "> Afghanistan </a>  </li> 
          <li><a href="#" data-value="Albania "> Albania </a>  </li> 
          <li><a href="#" data-value="Algeria "> Algeria </a>  </li> 
          <li><a href="#" data-value="American Samoa "> American Samoa </a>  </li> 
          <li><a href="#" data-value="Andorra "> Andorra </a>  </li>  
         </ul> 
        </div> 

リストは、すべての国が含まれていますが、この記事のために私はそれらの大部分を除外しました。 これは私のプロジェクトではうまくいかない理由は何ですか？おかげさまで

Answer 1

jsのボタンをどのようにターゲティングするかを変更することをお勧めします。

$(".dropdown-menu li a").click(function() { 
    // Gets the button by it's class name 
    $('.dropdown-toggle').html($(this).text() + ' <span class="caret"></span>'); 
    $('.dropdown-toggle').val($(this).data('value'); 
} 

ただし、ページに複数の '.dropdown-toggle'があることを計画している場合は、この問題が発生する可能性があります。

この場合、ボタンにidを与え、代わりにそれをターゲットにする必要があります。

<button id="country" class="btn btn-default dropdown-toggle dropcust" type="button" data-toggle="dropdown" href="#" style="width:50%"> 
    Country <span class="caret"></span> 
</button> 


$('#country).html($(this).text() + ' <span class="caret"></span>'); 
$('#country').val($(this).data('value');