<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <section style="background: url('https://d32d8xzgnjxuvk.cloudfront.net/places/1-0/img/hero-bg.jpg') no-repeat;" class="hero d-flex align-items-center"> <div class="container"> <p class="small-text-hero"><i class="icon-localizer text-primary mr-1"></i>Lorem ipsum <span class="text-primary">dolor sit</span> amet</p> <h1>Let's <span class="text-primary">go </span> anywhere</h1> <p class="text-hero">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> <div class="search-bar"> <form action="#"> <div class="row"> <div class="form-group rightLine col-lg-2 col-sm-2 col-md-2"> <input type="text" name="location" placeholder="Location" id="location"> <label for="location" class="location"><i class="fa fa-dot-circle-o"></i></label> </div> <div class="form-group rightLine col-lg-2 col-sm-2 col-md-2"> <div class="btn-group bootstrap-select listing-categories dropdown"> <button class="btn dropdown-toggle bs-placeholder btn-default" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span id="locationtext">Bhopal</span> </button> <ul class="dropdown-menu locationLink" aria-labelledby="dropdownMenu1"> <li><p>Bhopal</p></li> <li role="separator" class="divider"></li> <li><p>Indore</p></li> <li role="separator" class="divider"></li> <li><p>Delhi</p></li> <li role="separator" class="divider"></li> <li><p>Kolkata</p></li> </ul> </div> </div> <div class="form-group col-lg-6 col-sm-6 col-md-6"> <input type="search" name="search" placeholder="What are you searching for?"> </div> <div class="form-group col-lg-2 col-sm-2 col-md-2"> <input type="submit" value="Search" class="submit"> </div> </div> </form> </div> </div> </section>

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); body { font-family: Open+Sans; font-size: 15px; font-weight: normal; line-height: 1.5; color: #212529; background-color: #fff; } section.hero { color: #fff; background-size: cover !important; } p.text-hero { font-size: 1.2em; font-weight: 300; } section { padding: 150px 0; } .align-items-center { -ms-flex-align: center!important; align-items: center!important; } p.small-text-hero { font-size: 1em; } .text-primary { color: #4dcb44 !important; } .search-bar { border-radius: 100px; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.15); padding: 5px; margin-top: 30px; padding-left: 30px; } group { margin-bottom: 0; position: relative; } .search-bar input, .search-bar .bootstrap-select { background: none; border: none; padding: 20px 0 15px; width: 100%; } .form-group{ margin-bottom:0; } .search-bar .rightLine::after { content: ''; display: block; height: 60%; width: 1px; background: #ddd; position: absolute; top: 20%; right: 0; } .search-bar input, .search-bar .bootstrap-select { background: none; border: none; padding: 20px 0 15px; width: 100%; } .search-bar .form-group label { position: absolute; top: 50%; right: 15px; cursor: pointer; transform: translateY(-50%); color: #aaa; font-size: 0.8em; } label { display: inline-block; margin-bottom: .5rem; } .search-bar .submit { background: #4dcb44; color: #fff; font-family: "Vidaloka",serif; border-radius: 100px; font-size: 1.3em; cursor: pointer; } .search-bar input, .search-bar .bootstrap-select { background: none; border: none; padding: 20px 0 15px; width: 100%; } .search-bar .bootstrap-select { width: 100% !important; padding: 0; } .search-bar input, .search-bar .bootstrap-select { background: none; border: none; padding: 20px 0 15px; width: 100%; } .search-bar .bootstrap-select button { background: none !important; outline: 0 !important; box-shadow: none; padding: 20px 0 15px; color: #aaa; font-weight: 300; font-family: "Poppins",sans-serif; border: 0; width: 100%; text-align: left; padding: 0; } .bootstrap-select.btn-group .dropdown-toggle .filter-option { display: inline-block; overflow: hidden; width: 100%; text-align: left; } .btn-group.open .dropdown-toggle { -webkit-box-shadow: none; box-shadow: none; } .open>.dropdown-menu { width: 100%; } .dropdown-menu p{ color:#000; margin: 0 10px; cursor:pointer; }

$(document).ready(function(){ $(".locationLink p").on("click",function(){ $("#locationtext").html(($(this).html())); }); });