So ändern Sie Bootstrap Dropdown-Titel auf Auswahltitel

Question

Ich habe versucht, den Titel des Dropdown-Menüs auf das ausgewählte Element zu ändern. Es funktioniert in jsfiddle, aber in meinem Projekt wird es nicht. Hier ist mein Code:

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

Die Liste enthält alle Länder, aber für diesen Beitrag Ich habe einen Großteil von ihnen aus. Irgendwelche Ideen, warum das in meinem Projekt nicht funktioniert? Danke.

Answer 1

Was ich empfehlen würde, zu ändern, wie Sie die Schaltfläche in js ausrichten.

Dies kann jedoch ein Problem sein, wenn Sie mehrere ".dropdown-Toggle" auf der Seite haben möchten.

In diesem Fall sollten Sie die Schaltfläche eine ID geben und dann stattdessen diese Ziel.

<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');