JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://disalle.dev.activemls.com/static/bootstrap/css/bootstrap.css">
<script src="http://disalle.dev.activemls.com/static/bootstrap/js/bootstrap.min.js"></script>
<script src="http://disalle.dev.activemls.com/static/js/shell.js"></script>
<div class="quick-search row">
		<div class="span6">
			<form class="form-inline" method="get" action="/property/search">
				<div class="input-append input-prepend">
					<div class="btn-group">
						<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
							Search by
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#cat">Property Type</a></li>
                            <li><a href="#city">City</a></li>
							<li><a href="#price">Price</a></li>
							<li><a href="#bdrms">Bedrooms</a></li>
							<li><a href="#bthrms">Bathrooms</a></li>
						</ul>
					</div>
					<input class="span4" id="appendedPrependedInput" type="text">
					<button type="submit" class="btn btn-primary">Search</button>
				</div>
			</form>
		</div>
	</div>

JavaScript

$(document).ready(function() {
    $('.dropdown-menu>li>a').on("click", function() {
        var buttonText = $(this).text();
        $('.dropdown-toggle').replaceWith(buttonText);
    });
});