Show Selected Option In Bootstrap Dropdown List Menu

I have dropdown list in my bootstrap menu.

Copy

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

Solution 2:

Change your html like :

<liclass="dropdown"><buttonid="options"aria-expanded="false"aria-haspopup="true"role="button"data-toggle="dropdown"class="dropdown-toggle" >Chose option<spanclass="caret"></span></button><ulclass="dropdown-menu"><li><ahref="#" >Option 1</a></li><li><ahref="#">Option 2</a></li><li><ahref="#" >Option 3</a></li><li><ahref="#" >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>

Solution 3:

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

<divclass="btn-group"><buttonclass="btn btn-secondary dropdown-toggle"type="button"data-toggle="dropdown"id="options"><spanid="opt">Chose option</span><spanclass="caret"></span></button><ulclass="dropdown-menu"><li><aclass="dropdown-item"id="1"href="#" >Option 1</a></li><li><aclass="dropdown-item"id="2"href="#">Option 2</a></li><li><aclass="dropdown-item"id="3"href="#" >Option 3</a></li><li><aclass="dropdown-item"id="4"href="#" >Option 4</a></li></ul></div><scripttype="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>

Solution 4:

I found a solution using "onclick"

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

Hope it helps! :)

Solution 5:

You can go through this simple example.

<divclass="btn-group"><buttonclass="btn">Please Select From List</button><buttonclass="btn dropdown-toggle"data-toggle="dropdown"><spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu"><li><atabindex="-1"href="#">Item I</a></li><li><atabindex="-1"href="#">Item II</a></li><li><atabindex="-1"href="#">Item III</a></li><liclass="divider"></li><li><atabindex="-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