Complex TWBS Button Groups

by kpowz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="input-group" style="margin-top: 30px">  
    <label class="form-control">Job Status: 
        <span class="selection">--</span>
    </label> 
    <div class="input-group-btn">
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">                
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Created</a></li>
                <li><a href="#">Ordered</a></li>
            </ul>
        </div>
        <button type="submit" class="btn btn-default" value="" >
            <span class="glyphicon glyphicon-ok" />
        </button>
    </div>
</div>

JavaScript

$(".dropdown-menu li a").click(function(){
  $(this).parents(".input-group").find('.selection').text($(this).text());
  $(this).parents(".input-group").find('.selection').val($(this).text());

});