<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="header"> <div class="container"> <div class="row"> <div class="col-xs-8 col-xs-offset-2"> <form name="search-form" method="POST" action="#"> <input type="hidden" name="price" id="search_price" value="0"> <input type="hidden" name="locality" id="search_locality" value="0"> <div class="input-group"> <div class="input-group-btn search-panel"> <button id="price_button" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span id="search_concept">Price</span> <span class="caret"></span> </button> <ul id="dropdown-menu1" class="dropdown-menu" role="menu"> <li><a onclick="$('#search_price').val('50-100');"> 500 - 1000</a></li> <li><a onclick="$('#search_price').val('1000 - 1500');"> 1000 - 1500</a></li> <li><a onclick="$('#search_price').val('1500 - 2000');"> 1500 - 2000</a></li> </ul> </div> <div class="input-group-btn search-panel"> <button id="locality_button" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span id="search_concept">Location</span> <span class="caret"></span> </button> <ul id="dropdown-menu2" class="dropdown-menu" role="menu"> <li><a onclick="$('#search_locality').val('JP Nagar');">JP Nagar</a></li> <li><a onclick="$('#search_locality').val('Hebbal');">Hebbal</a></li> <li><a onclick="$('#search_locality').val('Bogadi Road');">Bogadi Road</a></li> </ul> </div> <input type="hidden" name="search_param" value="all" id="search_param"> <input name="searchKeyword" type="text" class="form-control" name="x" placeholder="Search plots..."> <span class="input-group-btn"> <button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-search"></span></button> </span> </div> </form> </div> </div> </div>

body{ margin-top:20px; }

$(function(){ $("#dropdown-menu1").on('click', 'li a', function(){ $("#price_button:first-child").text($(this).text()); $("#price_button:first-child").val($(this).text()); }); $("#dropdown-menu2").on('click', 'li a', function(){ $("#locality_button:first-child").text($(this).text()); $("#locality_button:first-child").val($(this).text()); }); });