부트 스트랩 드롭 다운을 선택 제목으로 변경하는 방법

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