javascript - Bootstrap dropdown not displaying selected value - Stack Overflow

admin管理员组

文章数量:1326277

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

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/9xzqdry9/

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited May 23, 2017 at 12:33 CommunityBot 111 silver badge asked Jun 23, 2016 at 15:24 alu268alu268 7311 gold badge22 silver badges44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>

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

1. DON'T INSTALL BOOTSTRAP AND POPPER, if install please uninstall package, it should not be present in Node_modules folder
2. Remove all entry of bootstrap from angular.js file.
3. 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/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">  

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

本文标签： javascriptBootstrap dropdown not displaying selected valueStack Overflow