Show selected option in bootstrap dropdown list menu

Question

I have dropdown list in my bootstrap menu.

<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<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>
</li>

I'm trying to get selected option in dropdown as title of dropdown instead of "chose option", as it is now. I have tried several solutions found on this and some other sites, but can't make any of them to work.

Can someone help with this?

Possible duplicate of [jQuery Get Selected Option From Dropdown](http://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) — Liam Sorsby, Oct 29 '15 at 12:08

score 35 · Accepted Answer · answered Oct 29 '15 at 14:04

35

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

answered Oct 29 '15 at 14:04

Ganesh Kumar

3,220
1
19
27

how to allow the multiple selection from your html code? – sasori May 17 '17 at 02:47
I'm using this solution for a form with not one but multiple dropdowns, but if i use the same id (selected) for the span the dropdowns work weird and start showing the selected span in other dropdowns. Is there any way to apply this solution when you have multiple dropdowns without having to have a different id for every single span ? – Lowtrux Jun 27 '17 at 12:47
@Ganesh, this does not work if the href is set to some link rather than #. As the page gets redirected the javascript code does nit work as expected. – Sejal Shah Dec 12 '19 at 11:18

score 5 · Answer 2 · answered Oct 30 '15 at 03:52

Change your html like :

 <li class="dropdown">
    <button id="options" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" >Chose option<span class="caret"></span></button>
        <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>
</li>

and on javascript side do like this way :

 <script>

        $(document).ready(function(){
            $(".dropdown-menu li a").click(function(){
            $("#options").text($(this).text());
            });
        });
    </script>

This does not work if href is set to some link. The page gets redirected. — Sejal Shah, Dec 12 '19 at 11:17

score 1 · Answer 3 · answered Aug 29 '22 at 08:27

In case of multiple dropdowns, this works, not using any ID

<div class="d-flex  gap-3 col-md-3">
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown button
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown button <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
    </div>
  </div>
    <script>
        $(".dropdown-menu li a").click(function () {
            var selText = $(this).text();
            $(this).parents('.dropdown').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
        });
    </script>

Abilash Nadesan · Answer 4 · 2018-07-23T14:04:33.110

You can go through this simple example.

<div class="btn-group">
    <button class="btn">Please Select From List</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
   </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
   <li><a tabindex="-1" href="#">Item I</a></li>
   <li><a tabindex="-1" href="#">Item II</a></li>
   <li><a tabindex="-1" href="#">Item III</a></li>
   <li class="divider"></li>
   <li><a tabindex="-1" href="#">Other</a></li>
 </ul>
</div>

Add the below script :

$(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

Also you can try this sample in http://jsbin.com/owuyix/4/edit

Tried this already, but it's not working with my layout. I don't have button, and can't add it. — onedevteam.com, Oct 29 '15 at 11:48

score 0 · Answer 5 · answered Nov 29 '17 at 16:52

I had the same problem and here is the solution I found.

<div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" id="options"> <span id="opt">Chose option</span> <span class="caret"></span>
    </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" id="1" href="#" >Option 1</a></li>
        <li><a class="dropdown-item" id="2" href="#">Option 2</a></li>
        <li><a class="dropdown-item" id="3" href="#" >Option 3</a></li>
        <li><a class="dropdown-item" id="4" href="#" >Option 4</a></li>
      </ul>
</div>

<script type="text/javascript">
$(function(){
  $("#1").click(function () {
  $("#opt").text($(this).text());
  });
  $("#2").click(function () {
  $("#opt").text($(this).text());
  });
  $("#3").click(function () {
  $("#opt").text($(this).text());
  });
  $("#4").click(function () {
  $("#opt").text($(this).text());
  });
});
</script>

score 0 · Answer 6 · answered Mar 23 '18 at 18:21

0

I found a solution using "onclick"

onclick="$('#your-main-button-name').html('The text you want to show');"

Hope it helps! :)

answered Mar 23 '18 at 18:21

Mourad

13
8

Show selected option in bootstrap dropdown list menu

6 Answers6

Linked

Related