<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-5"> <div class="input-group custom-input"> <div class="input-group-btn search-panel"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span id="search_concept">Filter by</span> <span class="caret"></span> </button> <ul class="dropdown-menu" id="search-dropdown" role="menu"> <li><a href="#contains">Contains</a></li> <li><a href="#its_equal">It's equal</a></li> <li><a href="#greather_than">Greather than ></a></li> <li><a href="#all">Anything</a></li> </ul> </div> <input type="hidden" name="search_param" value="all" id="search_param"> <input type="text" class="form-control" name="x" placeholder="Search term..."> <span class="input-group-btn"> <button class="btn btn-default" id="search" type="button"><span class="glyphicon glyphicon-search"></span></button> <button class="btn btn-default" id="add" type="button"><span class="glyphicon glyphicon-plus"></span></button> </span> </div> </div> </div> <style> .dropdown-toggle { border-radius:20px; color:white; } .btn { background:#8c8c8c; border: 1; border-color: #8c8c8c; } #search { border-style: solid; border-right-width: 2px; border-right-color: white; } #add { border-radius:0 20px 20px 0; } .glyphicon { color: white; font-size: 12px; } .form-control, .btn{ font-size:12px; height:25px; } #search_concept, .caret, .glyphicon-search, .glyphicon-plus { position: relative; top: -4px; } #search-dropdown { background: white; } #search-dropdown > li > a { color: black; font-size: 12px; border: none; background: none; line-height:2px; } .custom-input { position: relative; top: 5px; } </style> </div>

body{background: #333333; margin-top: 20px; }

$(document).ready(function(e){ $('.search-panel .dropdown-menu').find('a').click(function(e) { e.preventDefault(); var param = $(this).attr("href").replace("#",""); var concept = $(this).text(); $('.search-panel span#search_concept').text(concept); $('.input-group #search_param').val(param); }); });