<div class="dropdown">City</div>
<div class="down-menu" style="display:none;">
<ul>
<li><a href="">NYC</a></li>
<li><a href="">LA</a></li>
<li><a href="">London</a></li>
<li><a href="">Manchester</a></li>
</ul>
</div>
$(function(){
$(".dropdown").click(function(){
$(".down-menu").show();
});
$("a").click(function(event){
event.preventDefault();
let city = $(this).text();
$(".dropdown").text(city);
});
});
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<a href="http://<?=$_SERVER['HTTP_HOST']?add ?>">link</a>