How Display Selected Item from Bootstrap 4 Drop-Down Item Menu

How display selected item from Bootstrap 4 drop-down item menu

I found the solution:

I included input-group into my html, as well as included jQuery:

HTML:

    <h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
<div class="dropdown">
<div class="input-group justify-content-center">
<div class="input-group-btn">
<button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Eye Color

</button>

<div class="dropdown-menu" onchange="selectMenu1" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" data="brown" ><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
<a class="dropdown-item" href="#" data="blue" ><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
<a class="dropdown-item" href="#" data="green" ><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
<a class="dropdown-item" href="#" data="hazel" ><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
</div>

</div>
</div>
</div>



<script>
$(".dropdown-menu a ").click(function(){
$(this).parents(".input-group-btn").find('.btn').text($(this).text());
});
</script>

Show selected option in bootstrap dropdown list menu

This should work for you:

<div class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">
<span id="selected">Chose option</span><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
</div>

And the script:

  $('.dropdown-menu a').click(function(){
$('#selected').text($(this).text());
});

You need to wrap the text 'Choose option' inside <span> to modify its value on selection.

Here is the working code: http://liveweave.com/U4BpiH

Bootstrap Dropdown selected item

The functionality that you want, based upon your description, is a select box. The bootstrap drop down is more for collapsing lists (think nav bars).

You can go with a plugin like bootstrap-select, or you can write your own functionality (I would recommend writing in your functionality).

Here is a small mockup of what you can do to simulate a select box:
https://jsfiddle.net/eanzfcu1/

Basically you are just listening for an onclick for the li items of the list, then changing the ul text to whatever the li's was.

How to display selected item in the title of the bootstrap dropdown list ? and how to display selected item on a javascript alert box?

I am modified HTML little bit, and added jquery event:

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown: <span class="selected"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

Jquery:

$('div.dropdown ul.dropdown-menu li a').click(function (e) {
$('.selected').html($(this).html());
})

--DEMO--

How can I show the selected items in the label of a Bootstrap dropdown?

You can actually do it very easily in the code you have already - you just need to check the number of selected options before you set the label:

  1. This line will get the number of selected checkboxes:
numSelected = $(this).parent(".dropdown-menu").find('.cb-element:checked').length;

  1. Now all you need to do is check if it is > 1, and set the button to:
selText = numSelected + " selected";

That's it! (Don't forget that you also need to check if the current checkbox was deselected - you're not currently doing that).

Show "All selected" label:

If you want to get fancy, you can also see if all of the checkboxes are selected and display "all selected" instead, or if 1 is selected then show the label of that one.

totalNumOptions = $(".dropdown-menu .cb-element").length;

$(".dropdown-menu a").change(function() {

// get selected options
selected = $(this).parent(".dropdown-menu").find('.cb-element:checked');

if (selected.length == totalNumOptions || $("input#checkall:checked").length == 1)
// ALL options are selected, of "All checked" is checked
selText = "All selected";

else if (selected.length == 1)
// show text of the SELECTED option (NOTE: not clicked option!)
selText = $(selected[0]).parent().text();

else
// show number of selected options
selText = selected.length + " selected";

$(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
});

Working Example:

// Get the total number of options so we can see if all are checked
// do this outside of handler so we only do it once
var totalNumOptions = $(".dropdown-menu .cb-element").length;

$(".dropdown-menu a").change(function() {

// get number of selected options
selected = $(this).parent(".dropdown-menu").find('.cb-element:checked');

if (selected.length == totalNumOptions ||
$(this).find("input#checkall:checked").length == 1)
// ALL options are selected
selText = "All selected";

else if (selected.length == 1)
//only 1 selected so show the selected option
selText = $(selected[0]).parent().text();

else
// show number of selected options
selText = selected.length + " selected";

$(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
});

// checbox
$('#checkall').change(function() {
$('.cb-element').prop('checked', this.checked);
});

$('.cb-element').change(function() {
if ($('.cb-element:checked').length == $('.cb-element').length) {
$('#checkall').prop('checked', true);
} else {
$('#checkall').prop('checked', false);
}

});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="btn-group ">

<button class="btn btn-secondary dropdown-toggle text-center" type="button" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item"><input type="checkbox" name="all" class="mr-2" id="checkall">Check All</br>
</a>
<a class="dropdown-item"><input type="checkbox" class="cb-element mr-2"> Checkbox 1</a>
<a class="dropdown-item"><input type="checkbox" class="cb-element mr-2"> Checkbox 2</a>
<a class="dropdown-item"><input type="checkbox" class="cb-element mr-2"> Checkbox 3</a>
</div>

</div>

Bootstrap-4 Buttons with dropdowns Selected value not display

I resolved the my problem
Solution 01

button work like a select box , I change my script

<script>

$('.dropdown-menu a').on('click', function(){
$('.dropdown-toggle').html($(this).html());
})
</script>

now its work for me

 $('.dropdown-menu a').on('click', function(){        $('.dropdown-toggle').html($(this).html());    })
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script><div class="row">  <div class="col-lg-6">    <div class="input-group">      <div class="input-group-btn">        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">         Currency        </button>        <div class="dropdown-menu">          <a class="dropdown-item" href="#">USD</a>          <a class="dropdown-item" href="#">AUS</a>               </div>      </div>      <input type="text" class="form-control" aria-label="Text input with dropdown button">    </div>  </div> </div>


Related Topics



Leave a reply



Submit