Bootstrap dropdown not displaying selected value

Question

Working with latest Bootstrap 3.3.6 and jQuery library 1.11.3, I'm trying to have dropdown display the selected value when the user selects one of the options. So far it looks like the dropdown ul won't display at all.

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

I referred to this thread for a working JS function but no avail: How to Display Selected Item in Bootstrap Button Dropdown Title

Current JSFiddle: https://jsfiddle.net/9xzqdry9/

score 7 · Answer 1 · answered Jun 23 '16 at 15:28

You just need to reference your bootstrap.js AFTER your 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>

score 1 · Answer 2 · edited Apr 17 '20 at 14:44

1

I saw your Current JSFiddle You should import first jQuery then Boostrap.js!

edited Apr 17 '20 at 14:44

jmorc

560
1
3
14

answered Jun 23 '16 at 15:34

Julian Porras

95
1
7

score 0 · Answer 3 · edited Jul 05 '23 at 20:12

DON'T INSTALL BOOTSTRAP AND POPPER, if install please uninstall package, it should not be present in Node_modules folder
Remove all entry of bootstrap from angular.js file.
Directly use CDN URL in index.html to solve all prb of popper and drop down

This solve my problem in index.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">  

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Bootstrap dropdown not displaying selected value

3 Answers3