Выпадающее окно Bootstrap не отображает выбранное значение

Question

Работа с последней версией Bootstrap 3.3.6 и jQuery library 1.11.3, я пытаюсь отобразить выбранное значение, когда пользователь выбирает один из параметров. До сих пор похоже, что выпадающая ul не будет отображаться вообще.

HTML:

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Select One 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu"> 
    <li><a href="#" data-value="a">A</a></li> 
    <li><a href="#" data-value="b">B</a></li> 
    </ul> 
</div> 

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

я говорил на эту тему для рабочей функции JS, но без толка: How to Display Selected Item in Bootstrap Button Dropdown Title

Текущего JSFiddle: https://jsfiddle.net/9xzqdry9/

Answer 1

Вам просто нужно ссылаться на ваш bootstrap.js ПОСЛЕ вашего jquery.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')); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    Select One 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu"> 
 
    <li><a href="#" data-value="a">A</a></li> 
 
    <li><a href="#" data-value="b">B</a></li> 
 
    </ul> 
 
</div>

Answer 2

Я видел, как ты Текущего JSFiddle Вы должны импортировать первый JQuery, чем Boostrap. js! Anymore!