Complex TWBS Button Groups 2

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 gus-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>
    </div>
    <label class="form-control">
    </label> 
    <div class="input-group-btn">
        <button type="submit" class="btn btn-default" value="" >
            <span class="glyphicon glyphicon-ok" />
        </button>
    </div>
</div>

CSS

.gus-input-group label:first-child{
    border-right: 0;
}

.gus-input-group .form-control{
    text-align: right;
}

.gus-input-group .form-control:nth-child(3){
    padding-right: 2.2em;
    padding-left: 2.2em;
    border-left: 0;
}
.gus-input-group button[type="button"].btn{
    border-radius: 0;
    border-right: 0;
    border-left: 0;
}
.gus-input-group button[type="submit"].btn{
    padding-right: 1.5em;
    padding-left: 1.5em;
}

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());

});