0

I have a bootstrap dropdown menu and it has 'Action' as the default text. When I click on one of the dropdown items I would like it to be set to the text in the text field, but it doesn't. How do I get it so that it sets the visible text after I select an item.

<div class="btn-group">
  <button type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Active</a>
    </li>
    <li><a href="#">Not Listed</a>
    </li>
  </ul>
</div>
chuckd
  • 13,460
  • 29
  • 152
  • 331
  • Have you include all the JS and CSS files required like jquery.js etc?? Try this out: http://jsbin.com/gafoci/1/edit?html,js,output – Neeraj Verma Apr 15 '15 at 19:26

2 Answers2

1

I would do it with jQuery. I'm sure there is a more efficient way to do this, but for each drop-down item, you could just create a function that changes the text of the button.

$(document).ready(function() {

  $('#item1').on('click', function() {
    $('#item0').text('Active');
  });

  $('#item2').on('click', function() {
    $('#item0').text('Not Listed');
  });

});

Bootply: http://www.bootply.com/kYK0FAEDFz

SuperVeetz
  • 2,128
  • 3
  • 24
  • 37
0

Have you tried a traditional Select Dropdown? I believe this would accomplish your goals.

<select>
<option>Action</option>
<option>Not Listed</option>
</select>
bluevman
  • 63
  • 1
  • 8