0

I have a bootstrap button dropdown with items. I want the dropdown item text, when clicked, to show up in the button text. What is the easiest way to do this?

<div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Groups <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
        </ul>
    </div>

I've done so by doing this. But the problem is, when I put the new value into the button it expands the button and looses the caret. How can I make the button stay a certain width and keep the caret?

chuckd
  • 13,460
  • 29
  • 152
  • 331
  • 1
    Possible duplicate of [How to Display Selected Item in Bootstrap Button Dropdown Title](http://stackoverflow.com/questions/13437446/how-to-display-selected-item-in-bootstrap-button-dropdown-title) – vanburen Aug 03 '16 at 22:43

1 Answers1

0

Try with this

<select id="control_id" class="form-control" style="width:150px">
   <option value="action">Action</option>
   <option value="another_action">Another action</option>
   <option value="something_else_here">Something else here</option>
</select>

You can access the value selected by $("#control_id").val(); or $("#control_id").text();

Hugo Quiñónez
  • 176
  • 1
  • 9